Restore original Vite chunk size limit #713
Conversation
See https://v3.vitejs.dev/guide/build.html#chunking-strategy I picked a chunking strategy where we chunk two large groups of vendor dependencies: React based and Scrivito based packages.
| output: { | ||
| manualChunks: { | ||
| react: ['react-bootstrap', 'react-helmet-async', 'react-toastify'], | ||
| scrivito: ['scrivito-neoletter-form-widgets'], |
There was a problem hiding this comment.
FMI: Please help my understand, what this scrivito chunk means? My (maybe naive) understanding would be, that their is a chunk named scrivito, but it only contains scrivito-neoletter-form-widgets. But if I look at the resulting size it shows this:
dist/assets/scrivito-CFqY22Np.js 465.18 kB │ gzip: 144.80 kB
But scrivito-neoletter-form-widgets is not that big (should be ~13 kB gzipped). I assume, that it also compiles the npm package scrivito in there.
There was a problem hiding this comment.
Yes, it includes dependencies. Same goes for the react-* packages, since they depend on react and react-dom. We could make it explicit, but since subdependencies are also included, it doesn't really make things clearer.
| outDir, | ||
| rollupOptions: { | ||
| input: { | ||
| main: resolve(__dirname, 'index.html'), | ||
| _scrivito_extensions: resolve(__dirname, '_scrivito_extensions.html'), | ||
| }, | ||
| output: { | ||
| manualChunks: { |
There was a problem hiding this comment.
Besides the newly created react and scrivito chunk there are still two js files in the end: main-<hex>.js and index-<hex>.js - since main-<hex>.js is quite small, can they be combined into one file?
| outDir, | ||
| rollupOptions: { | ||
| input: { | ||
| main: resolve(__dirname, 'index.html'), | ||
| _scrivito_extensions: resolve(__dirname, '_scrivito_extensions.html'), | ||
| }, | ||
| output: { | ||
| manualChunks: { |
There was a problem hiding this comment.
Any metrics that point to having the same (or even better) performance with manual chunks?
There was a problem hiding this comment.
According to manual Lighthouse runs it's the same. Differences are all in the < 10 ms range.
| outDir, | ||
| rollupOptions: { | ||
| input: { | ||
| main: resolve(__dirname, 'index.html'), | ||
| index: resolve(__dirname, 'index.html'), |
There was a problem hiding this comment.
If I'm not mistaken, this only changes the name, but not merge the two files:
dist/assets/index-BZn5sF-c.js 6.56 kB │ gzip: 2.74 kB
dist/assets/editingConfigs-WubQ1JNa.js 26.47 kB │ gzip: 8.25 kB
dist/assets/ScrivitoBootstrapIconEditor-DTXMz-zT.js 47.51 kB │ gzip: 15.12 kB
dist/assets/index-DOwQ58pJ.js 107.26 kB │ gzip: 30.25 kB
Compare to one previous commit:
dist/assets/main-Bfrvei51.js 6.56 kB │ gzip: 2.74 kB
dist/assets/editingConfigs-WubQ1JNa.js 26.47 kB │ gzip: 8.25 kB
dist/assets/ScrivitoBootstrapIconEditor-DTXMz-zT.js 47.51 kB │ gzip: 15.12 kB
dist/assets/index-DOwQ58pJ.js 107.26 kB │ gzip: 30.25 kB
We can't use the simpler `index: ['index.html']` as this would also merge the CSS index assets which would load potentially unwanted app CSS from `_scrivito_extensions.html`. An interesting side-effect of not using `index: ['index.html']` is that the `index.html` scripts are now all loaded by `<script>` tags instead of `<script>` plus `<link rel="modulepreload">`. Next we could think about dropping the polyfill (https://vite.dev/config/build-options#build-modulepreload). The browser baseline is 2023 anyway (https://caniuse.com/link-rel-modulepreload).
See https://v3.vitejs.dev/guide/build.html#chunking-strategy
I picked a chunking strategy where we chunk two large groups of vendor dependencies: React based and Scrivito based packages.