Skip to content

Use CommonsChunkPlugin to place vendor libraries in cacheable bundles

username-removed-636429 requested to merge commons-chunk-plugin into master

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:

  1. Saves on bundle sizes; libraries do not need to be included multiple times in different bundles
  2. Makes large components of our frontend code cacheable. If something changes in application.js, it will not change the chunkhash of common.js so users won't have to re-download the contents of common.js as frequently.

There are three commons bundles created by this change:

  1. common.js - contains jQuery, several common jquery plugins, and all bootstrap plugins
  2. common_d3.js - contains the d3 library so that it doesn't need to be included individually in the graphs bundle and users bundle
  3. common_vue.js - contains Vue and VueResource 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:

before

After:

after

Does this MR meet the acceptance criteria?

What are the relevant issue numbers?

Closes #25550 (closed)

Merge request reports