These Rails apps are overpacking their JavaScript bundles
Author: Ross Kaffenberger
Published On: September 8th, 2020 (?)
The Webpacker Packing Checklist
Start with one entry point per page
Keep the number of packs small
Use dynamic imports
Go further with splitChunks, but only when you’re ready
Summary
Splitting your application into many small packs is not the performance optimization that you’d expect; it can result in duplicate NPM dependencies being included in each bundle (e.g. massive file sizes).
The author used Source Maps to dig into some popular Rails apps to illustrate the problem.
These sites have this issue (at the time of writing)
Podia
Funny or Die
Dribble
Teachable
Drizly
Stava
Cookpad.com is an example that does Rails code splitting right.
Mental Model
Rather than concatenating multiple files into a stack (like the Asset Pipeline), Webpack recursively parses import statements into a dependency graph, which is what it uses to do optimized code splitting. In Webpacker, each pack is a separate dependency graph.