Skip to content

Minify JavaScript files

Sarah German requested to merge js-minify into main

What does this MR do and why

Improves frontend performance by minifying JavaScript files with the rollup terser plugin.

Testing this on https://docs.gitlab.com/runner, we can take load size from 5.9 MB down to 4.0 MB. The default.js file is the main offender, probably because we load the Vue library from here; minifying this alone cuts 1.41 MB on every page of the site.

Screenshots

Before After
image image

How to test

  • Compile frontend assets locally with yarn bundle (or see output from this in the pipeline) and verify the build doesn't encounter errors
  • Either locally or on the review app, verify JavaScript components (e.g, collapsing the sidebar nav, running a search) work as expected

Check the file size difference like this:

# Get file size in MB for a production asset
$ curl -Is https://docs.gitlab.com/frontend/default/default.js | grep 'content-length' | awk '{print $2/1024/1024}'
2.15891

# Get file size in MB for the same asset on the review app
$ curl -Is http://js-minify.35.193.151.162.nip.io/frontend/default/default.js | grep 'Content-Length' | awk '{print $2/1024/1024}'
0.749111
Edited by Sarah German

Merge request reports