Skip to content

Advanced chunking seems to revert any treeshaking #3981

@glowtape

Description

@glowtape

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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions