Joshua Wood Web Developer

These Rails apps are overpacking their JavaScript bundles

Published On: September 8th, 2020 (?)

The Webpacker Packing Checklist

  1. Start with one entry point per page

  2. Keep the number of packs small

  3. Use dynamic imports

  4. 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.