webpack

Attributes

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

View page source - Edit this page - please contribute.