Skip to content

reduce bundle size/duplication

Fridtjof requested to merge optimize-bundles into master

What does this MR do?

This bumps a parameter for webpack's bundle splitting optimization from 5 to 6. It limits how many bundles may exist at most for a given entry point (= foodsharing module). Basically, if splitting client code into more files would cause any of our modules to need more than 5 files, webpack will not do so.

I'll let the results speak for themselves:

maxInitialRequests size of assets/ bundlesize analysis
5 (current) 48 MB node modules.png
6 37 MB sw.js.png
10 36 MB js1.e2a57fbdcbb4b9c85bae.js.png

The increase to 6 already prevents the translations (and lots of other core code) from being included in multiple bundles! Instead, there's a single "common" bundle now containing most of our common code. While the bundles look bigger than before, keep in mind that their sizes are relative to the total size, which has decreased!

Going beyond 6 yields diminishing returns, so I left it at that.

Side note: with HTTP2 being everywhere nowadays (including on our web server), the overhead of increasing the number of necessary requests is negligible (they will be transferred in parallel, over the same connection)

How confident are you it won't break things if deployed?

very!

Links to related issues

How to test

Checklist

  • added a test, or explain why one is not needed/possible...
  • no unrelated changes
  • asked someone for a code review
  • set a "for:" label to indicate who will be affected by this change
  • added to the next milestone (see https://gitlab.com/foodsharing-dev/foodsharing/-/milestones, unless it has a "for:Dev" label)
  • added an entry to CHANGELOG.md
  • added a short text in the release notes to /release-notes/YYYY-MM.md
  • Once your MR has been merged, you are responsible to create a testing issue in the Beta Testing forum: https://foodsharing.de/region?bid=734&sub=forum. Please change the MRs label to "state:Beta testing".
    • Consider writing a detailed description in German.
    • Describe in a few sentences, what should be tested from a user perspective.
    • Also mention different settings (e.g. different browsers, roles, ...) how this change can be tested.
    • Be aware, that also non technical people should understand.
Edited by Fridtjof

Merge request reports