[EPIC] Webpack

[desi]

What is this about?

This project involves consolidating multiple build processes into one which uses Webpack. This will involve addressing specific technical challenges such as MV3 script imports, LavaMoat integration, and memory constraints during bundling. The goal is to enhance developer velocity, improve application performance through optimized bundling and code splitting, and reduce long-term maintenance complexity.

Primary Outcome/Benefits:

From a stakeholders view point

• Reduce build time.
• Improve performance of the application itself (end user)
  • Code splitting
    • Improves our startup time at the expense of runtime.
• Reduce maintenance cost and increase velocity of build system work
• Reduces bundle size via tree shaking

Primary Outcome/benefits:

From a developer point of view

• More modern build system
  • Enables more performant and compact compilation
  • Reduces bundle size (also dependent on circular dependencies)
• We have 2 build systems we want to go back to 1
• Reduces bundle size via tree shaking

Existing Issues that may need to be completed. We should evaluate if they do.

• webpack: implement overrides for icons and manifests fields for non-main builds
• yarn webpack --type flask doesn't read PORTFOLIO_URL from builds.yml
• webpack: define and wrangle the difference between lockdown and lavamoat options

New Issues Needed

• Update code splitting to fully leverage performance gains.
• Remove base64-encoded PNGs embedded in SVG files and prevent reintroduction (quality gate).

PR Review Needed

• Fix image-related issues: #29294
• Fix image-related issues: #29292
• Fix image-related issues: #29290

Blockers:

• We need a dedicated machine to run performance tests such that we can have a quality gate(?) to prevent regression in performance - Probably not specific to this EPIC but related to performance benchmarking and quality gates as a whole.
• SVG (png base 64 encoded inside of SVG). Problem with this is that SVG is a compressible file type but base 64 encoded is not) so the webpack zip process runs out of memory.
  • Get ride of them and put a quality gate in place so we can't add anymore - issue in subissues attached.
• Webpack is constrained by memory so we may have to address this at some point. Increasing the amount of memory we give it doesn't fix this.
• Potential Blockers or part of the work needed - Need to be reviewed to determine if they are blockers and need to be completed
  • webpack: implement overrides for icons and manifests fields for non-main builds
  • yarn webpack --type flask doesn't read PORTFOLIO_URL from builds.yml
  • webpack: define and wrangle the difference between lockdown and lavamoat options.

Considerations/Things to keep in mind as we are doing this work

• Adhere to Webpack’s idiomatic practices to maximize long-term benefits.
• Maintain a focus on minimizing developer velocity impact. It is going to be slower as we add more code but make sure to evaluate all possibilities to make sure we are increasing as minimally as possible. Maybe there is a "ratio" metric we can use to make sure we maintain a velocity impact in line with code increase
• Evaluate potential solutions for speculative preloading and hover-prefetching to optimize runtime performance.

Subissues

• webpack: MV3 support.
• webpack: make lavamoat work so we can build --env=production builds
• webpack: define and wrangle the difference between lockdown and lavamoat options.

Work Breakdown

• LavaMoat Integration:
  • Understand remaining blockers on Lavamoat / Endomoat and assist with removing
  • Ensure Webpack builds can run inside the LavaMoat binary (endomoat)
  • LavaMoat plugins
• Service workers, used by MV3, must load dependencies via importScripts.
  • May be able to use a open source tool now. Need to investigate as part of the work
• Webpack Zip issues
• Address memory issues caused by large embedded assets.
• Complete remaining cleanup of problematic SVG files.

Scenario

n/a

Design

n/a

Technical Details

n/a

Threat Modeling Framework

n/a

Acceptance Criteria

• Successfully run Webpack build processes inside the LavaMoat binary. (Don't benchmark based on running inside the Lavamoat)
• Ensure compatibility with both MV2 and MV3 builds.
• Support all development environments (Windows, Mac, Linux).
• Transition to a single, unified build system with no remaining dependencies on the old system.

Stakeholder review needed before the work gets merged

• Engineering (needed in most cases)
• Design
• Product
• QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
• Security
• Legal
• Marketing
• Management (please specify)
• Other (please specify)

References

No response