What the bundler did: tree shaking, chunks and source maps
You imported one function and shipped 70 KB. Every question starts from a module graph, a bundle treemap, or a build config and asks what the bundler kept, why it kept it, and which change would make the bundle smaller. Covers tree shaking, sideEffects, code splitting, content hashes, and source maps. Sizes in the diagrams are rounded and illustrative.
Questions
- Not answered. You wrote
import { debounce } from 'lodash'and use nothing else from lodash. Why does the whole library end up in the bundle? - Not answered. Which features of CommonJS prevent a bundler from proving that an export is unused?
- Not answered.
utils.jshas 20 named exports and you writeimport * as utils from './utils.js'. Which uses ofutilsforce the bundler to keep all 20? - Not answered.
api.jsexports one class,ApiClient, with 40 methods. Your app creates a client and calls onlygetUser(). What does tree shaking remove from the class? - Not answered. Nothing imports
store, yet the call that creates it survives minification. Which change lets the minifier drop it? - Not answered.
App.jsimports onlyButtonfrom theuibarrel, yetchart-libanddate-libship in the bundle. Which changes remove them? - Not answered. After you add
"sideEffects": falseto your app'spackage.json, the production build loses every component's styles. What went wrong? - Not answered.
vite buildproduces a small bundle, but undervite devthe page makes about 1,400 requests before it renders. Why? - Not answered. What removes this development-only warning from a production build?
- Not answered. Your analytics show that every visitor runs a browser released in the last two years. Which change removes most of the polyfill block?
- Not answered. Each change below is applied on its own. Which ones bring this bundle under its 150 KB budget?
- Not answered. Why does the bundle contain two copies of
date-fns? - Not answered. A bundle analyzer reports 1,200 KB stat, 400 KB parsed and 110 KB gzip for the same file. Which number best predicts how long a phone spends parsing and compiling it?
- Not answered. Two lazy-loaded routes both import
chart-lib. How many copies of it does a Rollup or Vite build emit, and where? - Not answered. In a Vite production build of this graph, which modules end up in the entry chunk?
- Not answered. You lazy-loaded the editor with
import('./editor.js'), yet the analyzer still shows it inside the entry chunk. What is the most likely cause? - Not answered. The app only ever loads English and German, yet
dist/contains a chunk for each of the 42 files inlocales/. Why? - Not answered. How many JavaScript chunks does a default Rollup build emit for this graph?
- Not answered. Splitting
node_modulesinto a separatevendorchunk does not reduce the total number of bytes. Why do it? - Not answered. You changed one line in
Settings.js. After the deploy, bothSettings-a81b.jsand the entrymain-3f2a.jshave new hashes. Why did the entry change? - Not answered. In the same four-chunk build, you edit only
chart.js. How many of the four chunk filenames change? - Not answered. A production error points to
app.min.js:1:1042. Which original file contains the failing code? - Not answered. Your production site serves
app.js.map, includingsourcesContent, next toapp.js. What can any visitor read from it? - Not answered. You want readable stack traces in your error tracker without letting visitors read your source. Which setups achieve that?