Comparison
Side-effect-free modulevsTree shaking
Side-effect-free module
you added `"sideEffects": false` to the package and the bundle got noticeably smaller.
A declaration that importing a module does nothing beyond defining its exports, so the bundler may drop it entirely when none are used. Without it, any import must be kept in case it registers a polyfill, sets a global, or injects a stylesheet — which is exactly what an imported CSS file does. Marking a package free of side effects when it is not produces missing styles and missing registrations that only appear in production builds.
Full entry →Tree shaking
you import one function from a library and the other two hundred never reach the bundle.
Dropping exports that are never imported, using the static structure of ES modules to prove nothing references them. It works far less often than people assume: a CommonJS build, a re-export barrel, or a module the bundler cannot prove is side-effect free will all keep everything. Checking the analyser rather than trusting the term is the difference between an optimisation and a belief.
Full entry →