Optimization | webpack

Webpack runs optimizations for you depending on the chosen mode, still all optimizations are available for manual configuration and overrides.
Tells webpack to check the incompatible types of WebAssembly modules when they are imported/exported.
The default value of optimization.checkWasmTypes depends on the mode:
'natural' | 'named' | 'size' | 'total-size' | 'deterministic' | false
Tells Webpack which algorithm to use for chunk IDs. Setting optimization.chunkIds to false tells webpack that none of built-in algorithms should be used, as custom one can be provided via plugin. There are a couple of defaults for optimization.chunkIds:
The default value of optimization.chunkIds depends on the mode:
The following string values are supported:
A custom chunk id must not be an Object.prototype key such as constructor, toString or __proto__. The chunk loaders keep loaded chunks in a plain object, so such a chunk can count as already loaded and never be fetched. webpack's built-in algorithms never produce these ids.
By default, ids are hashed into an id space of 10³ (maxLength: 3) when optimization.chunkIds is set to 'deterministic'; the space grows by a factor of 10 when needed. To override the default behaviour, set optimization.chunkIds to false and use the webpack.ids.DeterministicChunkIdsPlugin.
webpack.ids.DeterministicChunkIdsPlugin is the plugin behind chunkIds: 'deterministic'. It hashes each chunk's name — its path relative to context, so ids don't change when the project moves — into a number, and it accepts these options:
Tells webpack to find segments of the module graph which can be safely concatenated into a single module. Depends on optimization.providedExports and optimization.usedExports.
The default value of optimization.concatenateModules depends on the mode:
Since webpack 5.109.0, CommonJS modules with statically analyzable exports are concatenated as well, and an object form is accepted for advanced options:
Use the optimization.emitOnErrors to emit assets whenever there are errors while compiling. This ensures that erroring assets are emitted. Critical errors are emitted into the generated code and will cause errors at runtime.
The default value of optimization.emitOnErrors depends on the mode:
If you are using webpack CLI, the webpack process will not exit with an error code while this plugin is enabled. If you want webpack to "fail" when using the CLI, please check out the bail option.
Use optimization.avoidEntryIife ...
optimization.avoidEntryIife can remove the IIFE when a chunk has multiple inlined entry modules, or a single inlined entry module alongside other modules in the chunk. An IIFE is still emitted when an inlined module needs to be in strict mode while the rest of the chunk is not, or when a module uses a non-standard name for the exports object (its exportsArgument).
The default value of optimization.avoidEntryIife depends on the mode:
The optimization.avoidEntryIife option can negatively affect build performance. If you prioritize build performance over these optimizations, consider disabling this option.
Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don't have to be loaded when the bigger chunk has been already loaded.
The default value of optimization.flagIncludedChunks depends on the mode:
optimization.innerGraph tells webpack whether to conduct inner graph analysis for unused exports.
The default value of optimization.innerGraph depends on the mode:
Inline ESM exports that bind to small primitive constants (a null, undefined, boolean, number or string of at most 6 bytes) at every import site, replacing the imported binding with the literal value. Once every import is replaced, the import dependency becomes inactive, the export turns unused, and dead-code elimination can drop the export and, if the module is side-effect free, the whole module.
The default value of optimization.inlineExports depends on the mode:
This happens in two steps. Given these modules:
First, every reference to the imported binding is replaced with its literal value (inlining):
Then, because no import references DEBUG anymore, the export const DEBUG is left unused and dead-code elimination drops it. If flags.js has no side effects, the whole module is removed too. The consuming code can additionally collapse the now-constant branch (if (false) ...).
Only small primitive constants are inlined: a null, undefined, boolean, number or string of at most 6 bytes. Objects, arrays and longer strings are left as regular exports.
Inlining also enables cross-module dead-branch skipping: when an imported constant is statically inlinable, webpack evaluates the condition that guards a branch and skips the dependencies that live only in the provably-dead branch (ESM import specifiers, require() calls, and dynamic import() calls), so the unreachable modules are never added to the bundle.
Because isDEV inlines to false, the devOnly branch is dead, so ./dev-tools is never bundled. The same holds for require() and dynamic import() calls that sit only in the dead branch.
Supported guard forms include ternaries (isDEV ? A : B), if statements, and the &&, ||, ?? and ! operators, including nested combinations.
boolean 'deterministic' | 'size'
optimization.mangleExports allows to control export mangling.
The default value of optimization.mangleExports depends on the mode:
The following values are supported:
When set to true tells webpack to reduce the size of WASM by changing imports to shorter strings. It mangles module and export names.
Tells webpack to merge chunks which contain the same modules. Setting optimization.mergeDuplicateChunks to false will disable this optimization.
Tell webpack to minimize the bundle using the MinimizerPlugin or the plugin(s) specified in optimization.minimizer.