TechPrufer
Get started
Atlassian
Atlassian logoAtlassian · Feature trail

Frontend Bundle Deduplication

3 posts · Nov 2020 – Dec 2020

What this trail covers

Atlassian's frontend performance efforts have focused on reducing JavaScript bundle sizes. This post details the development of a Webpack plugin to deduplicate transitive dependencies, leading to approximately 10% reduction in bundle sizes for key pages like Jira Issue view. This builds upon previous work in reducing overall JavaScript downloaded and modernizing bundles.

All Atlassian trails
  1. Performance in Jira front-end: solving bundle duplicates with Webpack and yarnThis post introduces a custom Webpack plugin designed to deduplicate transitive dependencies. It explains the concepts of direct vs. transitive dependencies, duplicated dependencies, and the semver deduplication process. The core contribution is the technical implementation of a `NormalModuleReplacementPlugin` to identify and replace duplicated nested dependencies with a single canonical version, thereby reducing the final bundled JavaScript size. The post also details the challenges with non-semver compatible dependencies and how Webpack's resolution algorithm can lead to further duplication.
  2. Performance in Jira front-end: using modern bundles to improve load timeThis post details the implementation of 'modern bundles' for Jira's frontend, which involves serving less transpiled JavaScript to modern browsers. It presents experimental results showing improvements in Time-to-Interactive (TTI) for both initial loads and SPA transitions, as well as a reduction in bundle size. The post also discusses expanding the definition of 'modern browsers' based on observed usage patterns and the impact of browserlist versioning.
  3. Performance in Jira front-end: the story of a single line of codeThis post details the process of identifying and fixing an inefficiency in Jira Cloud's frontend bundle sizes. The investigation involved using Chrome DevTools and webpack-bundle-analyzer to pinpoint large JavaScript assets. The root cause was identified as the `url-loader` configuration in Webpack, which was inlining images up to 10KB into critical JS bundles. The fix involved adjusting the `limit` option for `url-loader` to a much lower threshold (ideally only inlining SVGs) or disabling it entirely. This change is expected to reduce bundle sizes and improve page load performance by preventing the download, parsing, and execution of unnecessary inlined image assets, which also compress poorly with Gzip/Brotli.