-
Notifications
You must be signed in to change notification settings - Fork 710
Description
I've been testing various iterations of the upcoming Rolldown-based Vite at work. The main difference between the configs is transposing the manualChunk section to the advancedChunks one (assuming I did it right).
At work, I use the Tabler Icons for flashy iconography. Building my project with stock Vite with manualChunks, everything gets treeshaken properly. Trying the Rolldown-based one with the advancedChunks, it seems to always decides to pack all icon code/SVG into the chunk, regardless of whether the icon is in-use or not (quasi undoing any treeshaking/minification).
I just tried to create a repro for an issue and noticed that advancedChunks is the cause of it.
(Repro here: https://stackblitz.com/edit/github-z1badibh-fgajb3rp?file=vite.config.js )
Build output without it:
vite v6.3.0-beta.3 building for production...
The built-in minifier is still under development. Setting "minify: true" is not recommended for production use.
transforming (1) index.jsxtarget was modified to include ES2021 because useDefineForClassFields is set to false and oxc does not support transforming useDefineForClassFields=false for ES2022+ yet
✓ 5901 modules transformed.
dist/index.html 0.40 kB │ gzip: 0.25 kB
dist/assets/IconSkull-CtyFQlbR.js 0.54 kB │ gzip: 0.30 kB
dist/assets/createReactComponent-BQD9wsXb.js 9.02 kB │ gzip: 3.43 kB
dist/assets/index-Deub4-rD.js 176.06 kB │ gzip: 55.41 kB
✓ built in 3.50s
Build output with it. Note the 2.5MB huge chunk:
vite v6.3.0-beta.3 building for production...
The built-in minifier is still under development. Setting "minify: true" is not recommended for production use.
transforming (1) index.jsxtarget was modified to include ES2021 because useDefineForClassFields is set to false and oxc does not support transforming useDefineForClassFields=false for ES2022+ yet
✓ 5901 modules transformed.
dist/index.html 0.30 kB │ gzip: 0.22 kB
dist/assets/index-DRv2rl1A.js 176.11 kB │ gzip: 55.47 kB
dist/assets/icons-DP5JVsVA.js 2,606.37 kB │ gzip: 493.89 kB
(!) Some chunks are larger than 500 kB 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 4.75s
This is with this config:
advancedChunks: {
groups: [{ name: 'icons', test: '@tabler/icons-react' }],
},
In comparison, stock Vite with manualChunks:
vite v6.2.3 building for production...
✓ 5910 modules transformed.
dist/index.html 0.30 kB │ gzip: 0.22 kB
dist/assets/icons-DZ3J7wzX.js 9.60 kB │ gzip: 3.65 kB
dist/assets/index-CuvGa-97.js 177.50 kB │ gzip: 56.15 kB
✓ built in 2.84s