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?