Skip to content

task(settings): Improve webpack chunking#18934

Merged
dschom merged 1 commit intomainfrom
webpack-chunk-optimizations
Jun 3, 2025
Merged

task(settings): Improve webpack chunking#18934
dschom merged 1 commit intomainfrom
webpack-chunk-optimizations

Conversation

@dschom
Copy link
Contributor

@dschom dschom commented May 28, 2025

Because

  • We can get better cache performance if things that don't change often are chunked into their own packages
  • We can getter optimized network behavior with HTTP/2 and modern browsers by splitting up js files this way, ie multiple files can be downloaded concurrently.

This pull request

  • Creates a chunk for react and reach router called the 'presentation' chunk
  • Creates a chunk for large utils like moment or ua-parser called utils
  • Creates a chunk for observability libs like glean or sentry
  • Creates a chunk for network libs like apollo and gql

Issue that this pull request solves

Closes: FXA-11795

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

Any other information that is important to this pull request.

@dschom dschom requested a review from a team as a code owner May 28, 2025 23:18
Because:
- We can get better cache performance if things that don't change often are chunked into their own packages
- We can getter optimized network behavior with HTTP/2 and modern browsers by splitting up js files this way, ie multiple files can be downloaded concurrently.

This Commit:
- Creates a chunk for react and reach router called the 'presentation' chunk
- Creates a chunk for large utils like moment or ua-parser called utils
- Creates a chunk for observability libs like glean or sentry
- Creates a chunk for network libs like apollo and gql
@dschom dschom force-pushed the webpack-chunk-optimizations branch from 94bcca2 to fd224e4 Compare May 29, 2025 00:29
// This is only used in production mode
new CssMinimizerPlugin(),
],
splitChunks: isEnvProduction ? {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note, if I left out the isEnvProduction ? part, this would cause the dev environment to hang. However, I can validate the bundle is created successfully when running BUILD_TARGETS=prod yarn workspace fxa-settings build-react-prod

@chenba
Copy link
Contributor

chenba commented May 29, 2025

I like it. Once we are completely off of Backbone, we should update the cache headers to cache these files for longer.

@dschom dschom merged commit 4ba7f76 into main Jun 3, 2025
19 checks passed
@dschom dschom deleted the webpack-chunk-optimizations branch June 3, 2025 00:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants