Skip to content

feat(cwv): Adding treeshaking to nuxt configuration to improve CWV

Miracle Banks requested to merge tree-shaking-configuration into main

Step 1: What is changing in this MR?

Summary

To improve the performance and efficiency of our Nuxt.js application, this merge request implements several optimization techniques, including code splitting, tree shaking, and the addition of UglifyJS and CompressionWebpackPlugin. These improvements will enhance load times and ensure that only the necessary code is delivered to the user.

Code Splitting: Dynamically split the code into smaller chunks that can be loaded on demand, reducing the initial load time and improving overall application performance.

Tree Shaking: Remove unused code from the final bundles to minimize the size and ensure that only the required code is included.

What This Does

  1. Enables Tree Shaking: Configures Webpack to eliminate unused exports during the build process.
  2. Code Splitting: Dynamically split the code into smaller chunks that can be loaded on demand, reducing the initial load time and improving overall application performance.
  3. Adds ExtractCSS Configuration: Includes ignoreOrder: true to prevent issues with CSS order conflicts when extracting CSS into separate files.
  4. UglifyJS Plugin: Minimize and obfuscate JavaScript code to reduce the size of the output files.
  5. CompressionWebpackPlugin: Compress assets to further reduce the size of the delivered files, improving load times

Why This is Important

Performance Improvement: Should reduce the size of JavaScript and CSS bundles, leading to faster load times and a better user experience.

Efficient Resource Usage: Ensures that only the required code and styles are delivered to the user, minimizing unnecessary resource consumption.

Enhanced Maintainability: Improves the maintainability of the codebase by eliminating unused code and organizing the application into logical chunks.

How to Test

  1. Run Lighthouse from the browser: Verify performance increase on mobile version of the site, set to default aka page load

Expected Outcomes

  1. Faster page load times.
  2. Improved site performance and SEO.

related to: #3810 (closed) & #3809 (closed)

Step 2: Ensure that your changes comply with the following, where applicable:

  • I, the Assignee, have run Axe tools on any updated pages, and fixed the relevant accessibility issues.
  • These changes work on both Safari, Chrome, and Firefox.
  • These changes have been reviewed for Visual Quality Assurance and Functional Quality Assurance on Mobile, Desktop, and Tablet.
  • These changes work with our Google Analytics and SEO tools.
  • These changes have been documented as expected.

Step 3: Ensure that your changes don't cause regressions on key pages, where applicable:

Production Review app
https://about.gitlab.com/ WIP
https://about.gitlab.com/ja-jp/ WIP
https://about.gitlab.com/pricing/ WIP
https://about.gitlab.com/ja-jp/pricing/ WIP
https://about.gitlab.com/sales/ WIP
https://about.gitlab.com/gitlab-duo/ WIP
https://about.gitlab.com/enterprise/ WIP
https://about.gitlab.com/platform/ WIP
https://about.gitlab.com/free-trial/ WIP

Build Variables:

  • Use Contentful Preview API
Edited by Miracle Banks

Merge request reports