Refactor and improve our "universal" frontend code.

Background:

We currently have a large bundle of gitlab-ce~3412464 code that is imported on all pages. Every single page on GitLab imports main.js and, by necessity, everything else that main.js imports. This module sets up important config details, imports universally available libraries (like jQuery and Vue), and kickstarts the code needed for components seen on all (or nearly all) pages like the search bar, projects dropdown, collapsable sidebar, fly-out menus, etc. It also adds support for unicode emojis with image fallbacks, browser polyfills, and bootstrap plugins.

Currently it sits at 734KB uncompressed. This effectively defines the floor for javascript that is downloaded, parsed, compiled, and executed on every page. On many pages, with page-specific code added on top of this the number is far greater.

Screen_Shot_2018-06-14_at_4.13.21_PM

We have not performed a full audit of this universally imported code since refactoring our codebase with page-specific bundles last December, and I believe this is long overdue. Any amount that we can reduce this module's size and complexity will improve performance and maintainability for our frontend team going forward.

Goals:

  1. Improve page performance by reducing the amount of code that is necessarily imported and run on all pages.

  2. Improve code maintainability by reducing the complexity of this universally run code, documenting everything it does, and defining a policy around its use and modification.

Steps:

  • move page-specific code into page-specific bundles
  • remove global scope abuse
  • reduce "magic" code that runs based on introspected DOM state
  • consolidate large number of event handlers
  • refactor poorly implemented code and reduce technical debt
  • silo everything that is run by default into a well-defined directory structure
  • document everything that happens on page load
  • document a policy for adding to this univeral code
Edited by Mike Greiling