webpack

Attributes

Property	Value
Date Created	June 24, 2019
Date Ended	February 20, 2020
Slack	#wg_webpack (only accessible from within the company)
Google Doc	Webpack Working Group Agenda (only accessible from within the company)
Epic	Webpack Working Group

Background

GitLab has been using webpack to bundle its frontend assets for three years now, and it has enabled us to do some great things, but at the same time we are not taking full advantage of its strengths (e.g. code splitting and performance improvements) and we are letting it get in the way of developer productivity (high resource consumption, crashes, broken debug tooling, etc) by not adequately addressing issues as we scale. This working group aims to both fix the most glaring issues with our frontend build tooling and to re-align the frontend development guidelines to promote best practices for performance and maintainability using webpack's underutilized features.

Business Goal

Increase engineer productivity by fixing and improving our frontend build tooling, and put both guidelines and automated processes in place to ensure best practices are followed for performance and maintainability.

Exit Criteria

Improve GitLab's development environment.
- Reduce the GDK's node process overall memory requirements 30% by improving the webpack/sprockets build process, and put measures in place to track this consumption over time, ensuring it does not grow unchecked. => Reduced by 22% so far
Improve GitLab's overall frontend performance.
- Implement targeted builds for modern and legacy browsers (defined as those which do and do not support <script type="module"> respectively) with only the code transformations and polyfills needed by each target.
- Document code-splitting policies and put together a training workshop for frontend engineers and upload to youtube.
- Use webpack output stats to drive performance improvements
  - Determine which webpack output stats should be tracked and monitored (entrypoint bundle sizes, number of entrypoints, initial page load code coverage, duplicate modules across bundles)
  - Implement measures to track webpack output stats. (gitlab-ce!31537)
  - Prescribe limits to these metrics, and goals for reducing them.
  - Put CI jobs in place to warn developers when these increase and enforce best practices.

Conclusion

This effort is now looked after by the Manage:Foundations group.

Roles and Responsibilities

Working Group Role	Person	Title
Frontend Lead	Mike Greiling	Senior Frontend Engineer
Facilitator	Lukas 'Eipi' Eipert	Senior Frontend Engineer
Member	Jake Burden	Frontend Engineer
Member	Tristan Read	Senior Frontend Engineer
Member	David 'DJ' Mountney	Senior Distribution Engineer
Executive Stakeholder	Christopher Lefelhocz	VP of Development