Back to the catalog

What the bundler did: tree shaking, chunks and source maps

24 questions · by Quizbun

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

  1. Not answered. You wrote import { debounce } from 'lodash' and use nothing else from lodash. Why does the whole library end up in the bundle?
  2. Not answered. Which features of CommonJS prevent a bundler from proving that an export is unused?
  3. Not answered. utils.js has 20 named exports and you write import * as utils from './utils.js'. Which uses of utils force the bundler to keep all 20?
  4. Not answered. api.js exports one class, ApiClient, with 40 methods. Your app creates a client and calls only getUser(). What does tree shaking remove from the class?
  5. Not answered. Nothing imports store, yet the call that creates it survives minification. Which change lets the minifier drop it?
  6. Not answered. App.js imports only Button from the ui barrel, yet chart-lib and date-lib ship in the bundle. Which changes remove them?
  7. Not answered. After you add "sideEffects": false to your app's package.json, the production build loses every component's styles. What went wrong?
  8. Not answered. vite build produces a small bundle, but under vite dev the page makes about 1,400 requests before it renders. Why?
  9. Not answered. What removes this development-only warning from a production build?
  10. 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?
  11. Not answered. Each change below is applied on its own. Which ones bring this bundle under its 150 KB budget?
  12. Not answered. Why does the bundle contain two copies of date-fns?
  13. 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?
  14. Not answered. Two lazy-loaded routes both import chart-lib. How many copies of it does a Rollup or Vite build emit, and where?
  15. Not answered. In a Vite production build of this graph, which modules end up in the entry chunk?
  16. 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?
  17. Not answered. The app only ever loads English and German, yet dist/ contains a chunk for each of the 42 files in locales/. Why?
  18. Not answered. How many JavaScript chunks does a default Rollup build emit for this graph?
  19. Not answered. Splitting node_modules into a separate vendor chunk does not reduce the total number of bytes. Why do it?
  20. Not answered. You changed one line in Settings.js. After the deploy, both Settings-a81b.js and the entry main-3f2a.js have new hashes. Why did the entry change?
  21. Not answered. In the same four-chunk build, you edit only chart.js. How many of the four chunk filenames change?
  22. Not answered. A production error points to app.min.js:1:1042. Which original file contains the failing code?
  23. Not answered. Your production site serves app.js.map, including sourcesContent, next to app.js. What can any visitor read from it?
  24. Not answered. You want readable stack traces in your error tracker without letting visitors read your source. Which setups achieve that?