vite-plugin-chunk-split icon indicating copy to clipboard operation
vite-plugin-chunk-split copied to clipboard

explain difference to rollupOptions.output.manualChunks

Open milahu opened this issue 2 years ago • 2 comments

what is the difference to rollupOptions.output.manualChunks?

vite.config.js manualChunks

import { defineConfig } from "vite"

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('/node_modules/@codemirror/')) {
            return 'codemirror';
          }
          console.log("id", id)
          if (id.includes('/node_modules/')) {
            return 'vendor';
          }
        },
      }
    },
  },
})

vite.config.js chunkSplitPlugin

import { defineConfig } from "vite"
import { chunkSplitPlugin } from 'vite-plugin-chunk-split'

export default defineConfig({
  plugins: [
    chunkSplitPlugin({
      //strategy: 'default',
      customSplitting: {
        'codemirror': [/\/node_modules\/@codemirror\//],
      }
    })
  ],
})

result manualChunks

dist/index.js        11.26 KiB / gzip: 4.35 KiB
dist/vendor.js       187.72 KiB / gzip: 40.70 KiB
dist/codemirror.js   369.08 KiB / gzip: 116.12 KiB

result chunkSplitPlugin

dist/index.js                 11.29 KiB / gzip: 4.36 KiB
dist/vendor.js                187.66 KiB / gzip: 40.72 KiB
dist/codemirror.js            369.08 KiB / gzip: 116.12 KiB
dist/__commonjsHelpers__.js   0.13 KiB / gzip: 0.09 KiB

milahu avatar Dec 05 '22 11:12 milahu

Yes, the feature is by design to avoid circular dependency problem in manualChunks

sanyuan0704 avatar Dec 05 '22 11:12 sanyuan0704

i fixed my customSplitting regex now manualChunks and chunkSplitPlugin give the same result

milahu avatar Dec 05 '22 11:12 milahu