Webpack Tree Shaking and Dead Code Elimination Quiz Quiz

Challenge your understanding of Webpack tree shaking and dead code elimination, including best practices, configuration, and limitations for optimizing JavaScript bundles. Enhance your skills in identifying unnecessary code and maximizing build efficiency with this focused quiz on modern bundling techniques.

1. Identifying Prerequisites for Tree Shaking

   Which of the following is a necessary prerequisite for effective tree shaking in a JavaScript project?

   1. Declaring variables with var instead of let or const
   2. Including unused functions in the global scope
   3. Using ES6 module syntax (import and export)
   4. Writing all code in a single file

   Explanation: Tree shaking relies on the static structure of ES6 modules, allowing build tools to analyze which exports are used and eliminate the rest. Writing all code in a single file does not enable tree shaking if unused modules cannot be statically identified. Declaring variables with var is unrelated to module resolution and dead code elimination. Including unused functions in the global scope makes it harder for build tools to identify unused code, reducing effectiveness.

2. Dead Code Elimination Limitations

   In what scenario might dead code elimination fail to remove unused code from a JavaScript bundle?

   1. When the minimizer is correctly configured
   2. When all exports are explicitly unused
   3. When side effects are present in imported modules
   4. When using strict mode in every file

   Explanation: If a module has side effects, tools cannot safely remove imports from it, as doing so could change program behavior. When all exports are unused and there are no side effects, dead code elimination should work effectively. Proper minimizer configuration assists, rather than hinders, dead code elimination. Using strict mode does not influence dead code elimination because it is more about JavaScript parsing and execution rules.

3. Tree Shaking Configuration

   Which configuration property commonly helps inform the bundler that a package or module does not produce side effects and can be safely tree-shaken?

   1. deadCode: clean
   2. treeShake: enabled
   3. sideEffects: false
   4. removeUnused: true

   Explanation: Setting sideEffects to false tells the bundler that files in the module have no side effects and can be removed if unused, enabling more efficient tree shaking. The property removeUnused: true is not a standard setting and does not have the intended effect. treeShake: enabled is not a recognized configuration edge. deadCode: clean is also not a valid property for this purpose.

4. Distinguishing Tree Shaking From Other Optimizations

   Why doesn't minification alone guarantee removal of dead code in a JavaScript bundle built for production?

   1. Minification sorts imports and exports automatically
   2. Minification only works for CSS and HTML, not JavaScript
   3. Minification always converts all code to ES6 syntax
   4. Minification only compresses code and does not analyze usage

   Explanation: Minification reduces file size by renaming variables and removing whitespace but does not assess whether code is used or not. It does not convert code to ES6 syntax—this is done by transpilers. Sorting imports and exports is unrelated to code size reduction. Minification is commonly used for JavaScript and is not limited to CSS and HTML files.

5. Recognizing Impacts of Dynamic Imports on Tree Shaking

   How can using dynamic imports, such as import('module'), affect the effectiveness of tree shaking in a project?

   1. Dynamic imports limit static analysis, potentially reducing tree shaking efficiency
   2. Dynamic imports remove the need for side effect annotations
   3. Dynamic imports force all modules to be bundled together
   4. Dynamic imports always improve dead code removal by default

   Explanation: Because dynamic imports are resolved at runtime, build tools may struggle to determine which modules are used, reducing the effectiveness of tree shaking. They do not enhance code removal by default; in fact, unnecessary code may remain. Dynamic imports enable code splitting, avoiding bundling everything together. Side effect annotations remain important as tools need guidance on safe removal even with dynamic imports.