Joshua Wood Web Developer

These Rails apps are overpacking their JavaScript bundles

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.