Describe the bug
To manage well the bundle, I am setting the packages into manualChunks e.g.:
The package fabric is used only in the admin area of my app, that is why I don't need it to be loaded directly in the front page.
If I don't set it in manualChunks, it works good and it will not be loaded in the front page, but my chunks then are too large, because vite place it automatically together with others in a huge backend chunk. Then as soon I open the backend it lazy loads all the other chunks, including the one that contains fabric. So this is the expected behavior.
If I set it in manualChunks, e.g.:
rollupOptions: {
output: {
manualChunks: {
fabric: ['fabric'],
}
}
}
the fabric chunk is loaded directly on the front page. Even if I am not admin.
You can see the differences when I include fabric or not:
Not included in manualChunks

Included in manualChunks:

Expected behavior is: fabric should only be loaded when really used, else it creates only network traffic and lowers the Lighthouse score because of unused code!
NOTE: I am using an example with fabric here, but in my project I have a bunch of other libraries that have the same issue with manualChunks.
Reproduction
I created a small reproduction in this repo:
https://github.com/a-tonchev/react-boilerplate/tree/vite_no_lazy_load
Steps to reproduce:
- Install deps (
yarn)
Try bug:
yarn build && yarn serve
- Open localhost:4000 and see in Network -> JS, the
fabric script is loaded
To try without, open vite.config.js:
https://github.com/a-tonchev/react-boilerplate/blob/vite_no_lazy_load/vite.config.js
and comment out line 40
yarn build && yarn serve
- Open localhost:4000 and see in Network -> JS, the
fabric script is no more loaded,
System Info
Windows 10 + WSL (Ubuntu)
Vite version "^2.3.8"
Used Package Manager
yarn
Logs
No response
Validations
Describe the bug
To manage well the bundle, I am setting the packages into manualChunks e.g.:
The package fabric is used only in the admin area of my app, that is why I don't need it to be loaded directly in the front page.
If I don't set it in manualChunks, it works good and it will not be loaded in the front page, but my chunks then are too large, because vite place it automatically together with others in a huge backend chunk. Then as soon I open the backend it lazy loads all the other chunks, including the one that contains fabric. So this is the expected behavior.
If I set it in manualChunks, e.g.:
the fabric chunk is loaded directly on the front page. Even if I am not admin.
You can see the differences when I include fabric or not:
Not included in manualChunks

Included in manualChunks:

Expected behavior is: fabric should only be loaded when really used, else it creates only network traffic and lowers the Lighthouse score because of unused code!
NOTE: I am using an example with fabric here, but in my project I have a bunch of other libraries that have the same issue with manualChunks.
Reproduction
I created a small reproduction in this repo:
https://github.com/a-tonchev/react-boilerplate/tree/vite_no_lazy_load
Steps to reproduce:
yarn)Try bug:
yarn build && yarn servefabricscript is loadedTo try without, open vite.config.js:
https://github.com/a-tonchev/react-boilerplate/blob/vite_no_lazy_load/vite.config.js
and comment out line 40
yarn build && yarn servefabricscript is no more loaded,System Info
Windows 10 + WSL (Ubuntu) Vite version "^2.3.8"Used Package Manager
yarn
Logs
No response
Validations