Use CommonsChunkPlugin to place vendor libraries in cacheable bundles
What does this MR do?
Creates three new webpack bundles which contain references to common libraries and scripts. This improves our assets in two ways:
- Saves on bundle sizes; libraries do not need to be included multiple times in different bundles
- Makes large components of our frontend code cacheable. If something changes in
application.js
, it will not change the chunkhash ofcommon.js
so users won't have to re-download the contents ofcommon.js
as frequently.
There are three commons bundles created by this change:
-
common.js
- containsjQuery
, several common jquery plugins, and all bootstrap plugins -
common_d3.js
- contains thed3
library so that it doesn't need to be included individually in the graphs bundle and users bundle -
common_vue.js
- containsVue
andVueResource
so these don't need to be included independently within all of our Vue component bundles
Are there points in the code the reviewer needs to double check?
All tests should pass, bundle sizes should be much smaller, and compile time should be much faster
Why was this MR needed?
This is one of the primary reasons we switched to webpack in the first place.
Screenshots (if relevant)
Before:
After:
Does this MR meet the acceptance criteria?
-
Changelog entry added -
Documentation created/updated -
API support added - Tests
-
Added for this feature/bug -
All builds are passing
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Branch has no merge conflicts with master
(if it does - rebase it please) -
Squashed related commits together
What are the relevant issue numbers?
Closes #25550 (closed)