1

Now I am using vite "vite": "^4.3.2" to build the react project, split the chunks in vite like this:

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "build",
    rollupOptions: {
      output: {
        manualChunks(id){
          if (id.includes('node_modules')) {
            if(id.includes("antd")){
              return "antd-vendor";
            }else if(id.includes("react-dom")){
              return "react-dom-vendor";
            }else if(id.includes("react-router-dom")){
              return "react-router-dom-vendor";
            }else if(id.includes("redux")){
              return "redux-vendor";
            }
            return 'vendor';
          }
        }
      }
    }
  }
}

then build the project shows log:

> tsc && vite build

vite v4.3.2 building for production...
✓ 2787 modules transformed.
build/index.html                             0.85 kB │ gzip:   0.47 kB
build/assets/redux-vendor-45afda77.css       2.31 kB │ gzip:   0.93 kB
build/assets/index-27e39425.css              5.42 kB │ gzip:   1.59 kB
build/assets/index-1d8982e4.js              38.63 kB │ gzip:  12.33 kB
build/assets/antd-vendor-266f8812.js       111.49 kB │ gzip:  33.02 kB
build/assets/vendor-118430d3.js            140.48 kB │ gzip:  43.57 kB
build/assets/redux-vendor-cc85cac2.js      296.11 kB │ gzip:  98.92 kB
build/assets/react-dom-vendor-48a09118.js  513.17 kB │ gzip: 166.35 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 3.99s

the react-dom-vendor-48a09118.js still too large, is it possible to keep going split this package? what should I do to make it smaller?

Dolphin
  • 29,069
  • 61
  • 260
  • 539
  • Does it make sense to code split react-dom if you need it as soon as the app loads? Would it make more sense to code split + lazy load things you don't need on the first page load? – Cathal Mac Donnacha Aug 01 '23 at 10:48

0 Answers0