Improve bundling for global assets
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.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
Verify you can still bundle JS code: yarn bundle
-
View the site: make view
-
Browse around with browser devtools open, and check for 404s or console errors.
- You can verify jQuery and Bootstrap work by hovering over a tier badge or anything else with a tooltip.
- You can verify Vue loads by using search, opening the versions menu, filtering deprecations, or verifying that the table of contents component appears.
- You can verify Mermaid loads by viewing a page with diagrams, like this: https://rollup-optimizations.docs.gitlab-review.app/ee/topics/gitlab_flow.html#production-branch-with-gitlab-flow
- You can verify Lunr.js loads by running a search on the review app: https://rollup-optimizations.docs.gitlab-review.app/search
Some benchmarks from my local machine from the last few Rollup changes, running yarn bundle
:
- Before !3842 (merged): 38.11s
- After !3842 (merged): 27.73s
- After this MR: 21.46s
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.
-
I have evaluated the MR acceptance checklist for this merge request.
Edited by Sarah German