Why your JS bundle has unused code (tree shaking)

Why is your bundle full of code you never imported?

You import lodash to use one helper — debounce. You expect 2 KB. The bundler ships 70 KB. Every map, filter, throttle, chunk — all came along for the ride.

Tree shaking is opt-in, not magic. It needs three things:
1. ES modules — static import / export. CommonJS require is dynamic, so the bundler can't trace it.
2. No side effects on import. A CSS import or a polyfill runs the moment a file loads — the bundler plays safe and keeps it.
3. The import shape matters. Import the whole library, you get the whole library.

Three quick wins:
• Import per function (import debounce from 'lodash/debounce') instead of the default object.
• Add "sideEffects": false to your package.json — that tells the bundler your code is pure, drop what isn't used.
• Run rollup-plugin-visualizer to see your bundle. You'll find the bloat in seconds.

Music: Markvard - Time [NCS Release] (NoCopyrightSounds)
https://ncs.io

#performance #webpack #javascript #bundling #webdev #shorts #programming

Видео Why your JS bundle has unused code (tree shaking) канала ProCode