These Rails apps are overpacking their JavaScript bundles

Author: Ross Kaffenberger

URL:: https://rossta.net/blog/rails-apps-overpacking-with-webpacker.html

Published On: September 8th, 2020 (?)

Tags: #Articles #Rails #Webpack #Webpacker #JavaScript

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.

Updated June 2021