Webpack production mode tree shaking and dynamic module removal

Preserving Modules from Tree Shaking

To prevent Webpack from removing modules that are invoked dynamically or indirectly during a production build, you must explicitly signal to the static analyzer that these files contain side effects or are required dependencies.

Configuring sideEffects in package.json

The sideEffects property tells Webpack whether the modules in your project contain code that runs automatically upon import (e.g., modifying a global prototype or initializing a listener), regardless of whether any exports are used. By default, if sideEffects: false is set, Webpack will prune any module whose exports are not statically referenced.

To exempt specific files or patterns, change the boolean to an array of globs:

{
  "name": "your-project",
  "sideEffects": [
    "./src/polyfills/*.js",
    "./src/dynamic-modules/critical-init.js",
    "*.css"
  ]
}

Signaling Requirements without Static Imports

When a module is required but cannot be imported via a standard import { x } from '...' statement, use one of the following methods to ensure the analyzer retains the code:

• The Dead-Code Wrapper: Wrap a require call in a block that is logically unreachable but syntactically present. Webpack's analyzer often preserves the module dependency even if the block is never executed at runtime.
  if (false) { require('./path/to/module'); }
• require.context: Use this to bundle all modules within a specific directory that match a regex, effectively telling Webpack that any file in that folder is a potential dependency.
  const context = require.context('./modules', true, /\.js$/);
• ProvidePlugin: If the module provides a global utility used throughout the app, configure the webpack.ProvidePlugin in your config to automatically load the module when a specific identifier is encountered.

Verification and Assumptions

These recommendations assume you are using Webpack 4 or 5 in mode: 'production'. Because tree shaking is a combination of Webpack's dependency graph analysis and Terser's dead-code elimination, verification is required to ensure the module survived the process.

Verification Steps:

1. Run the production build and generate a stats file: webpack --mode production --json > stats.json.
2. Use webpack-bundle-analyzer to visually confirm the module is present in the final chunks.
3. Search the bundled output file for a unique string or function name from the preserved module to ensure it wasn't minified away.

Diagnostic Detail Needed: Are the modules being removed internal project files or dependencies within node_modules? (The sideEffects configuration differs slightly when targeting third-party packages versus local source code).