Skip to content

Upgrade to Webpack 4

Mike Greiling requested to merge upgrade-to-webpack-v4 into master

Upgrade to webpack v4, update several dependencies, and improve the webpack/rails integration.

  • Compile times should be faster.
  • Greatly simplifies the webpack config by eliminating the need for a lot of boilerplate production/development optimizations.
  • Utilizes entry point "CacheGroups" in place of manually generated CommonsChunkPlugin entries. This makes splitting cacheable chunks from our bundles declarative and automatic.
  • Proper support for tree shaking pure modules, (which unblocks us from upgrading to Lodash #23110 (moved))
  • Adds support for prefetch and preload hinting with dynamic chunks
  • Adds support for async script loading.
  • Removes IDE standalone bundle and integrates it into our /pages workflow (removing need for force_same_domain hack)

After this is merged we can switch to <script async> loading, experiment with pure_modules, and do some more advanced code splitting within the main.js modules.

Build Metrics

Here are some build metrics comparing webpack v3 and v4. It's not quite as radical of a difference as I had hoped, but it's still pretty decent. The largest change comes in the production build times. UglifyJS is now run with multiple threads, and its results are cached.

The reduction in production asset size is due to the re-introduciton of commons chunks which eliminate a lot of duplicate code between bundles (and their corresponding source map files).

metric webpack 3 webpack 4 savings
dev build (cold cache) 28.23s 23.64s -16%
dev build (warm cache) N/A 17.64s -38%
prod build (cold cache) 133.93s 104.72s -22%
prod build (warm cache) N/A 50.88s -62%
prod asset size (all) 113.8 MB 66.6 MB -41%
prod asset size (js-only, no-gz) 15.3 MB 13.3 MB -13%

Closes #43400 (closed)

EE Port: gitlab-org/gitlab-ee!5569

Edited by Mike Greiling

Merge request reports