Skip to content

Improve bundling for global assets

Sarah German requested to merge rollup-optimizations into main

What does this MR do and why?

This MR updates how we bundle site-wide frontend assets. We can do this better by using Rollup's built-in output.globals configuration option. This allows us to reference the globals (like Vue or $) from our own code without passing the global libraries through each bundle.

This has a few benefits:

  • Reduces bundle size and compile time by not including a copy of Vue with each Vue component.
  • Reduces bundle size by switching from regular jQuery to their slim build (we don't need jQuery AJAX, so this is OK).
  • Speeds up rollup compilation time -- global libraries are just copied over, not processed through all the plugins we need to run our custom code through.
  • Standardizes how global assets are imported. Previously we'd been doing this with Rollup for some things, and using make or ruby code for others.

This MR changes how we import: jQuery, Bootstrap, Vue, Mermaid, GitLab fonts, GitLab UI CSS, Lunr.js

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Verify you can still bundle JS code: yarn bundle
  3. View the site: make view
  4. Browse around with browser devtools open, and check for 404s or console errors.

Some benchmarks from my local machine from the last few Rollup changes, running yarn bundle:

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sarah German

Merge request reports