Since version 4 webpack runs optimizations for you depending on the chosen mode
, still all optimizations are available for manual configuration and overrides.
optimization.minimize
boolean
Tell webpack to minimize the bundle using the UglifyjsWebpackPlugin.
This is true
by default in production
mode.
webpack.config.js
module.exports = { //... optimization: { minimize: false } };
Learn how mode works.
optimization.minimizer
[UglifyjsWebpackPlugin]
Allows you to override the default minimizer by providing a different one or more customized UglifyjsWebpackPlugin instances.
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { //... optimization: { minimizer: [ new UglifyJsPlugin({ /* your config */ }) ] } };
optimization.splitChunks
object
By default webpack v4+ provides new common chunks strategies out of the box for dynamically imported modules. See available options for configuring this behavior in the SplitChunksPlugin page.
optimization.runtimeChunk
object
string
boolean
Setting optimization.runtimeChunk
to true
or "multiple"
adds an additional chunk to each entrypoint containing only the runtime. This setting is an alias for:
webpack.config.js
module.exports = { //... optimization: { runtimeChunk: { name: entrypoint => `runtime~${entrypoint.name}` } } };
The value "single"
instead creates a runtime file to be shared for all generated chunks. This setting is an alias for:
webpack.config.js
module.exports = { //... optimization: { runtimeChunk: { name: 'runtime' } } };
By setting optimization.runtimeChunk
to object
it is only possible to provide the name
property which stands for the name or name factory for the runtime chunks.
Default is false
: each entry chunk embeds runtime.
Imported modules are initialized for each runtime chunk separately, so if you include multiple entry points on a page, beware of this behavior. You will probably want to set it to single
or use another configuration that allows you to only have one runtime instance.
webpack.config.js
module.exports = { //... optimization: { runtimeChunk: { name: entrypoint => `runtimechunk~${entrypoint.name}` } } };
optimization.noEmitOnErrors
boolean
Use the optimization.noEmitOnErrors
to skip the emitting phase whenever there are errors while compiling. This ensures that no erroring assets are emitted. The emitted
flag in the stats is false
for all assets.
webpack.config.js
module.exports = { //... optimization: { noEmitOnErrors: true } };
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.
optimization.namedModules
boolean: false
Tells webpack to use readable module identifiers for better debugging. When optimization.namedModules
is not set in webpack config, webpack will enable it by default for mode development
and disable for mode production
.
webpack.config.js
module.exports = { //... optimization: { namedModules: true } };
optimization.namedChunks
boolean: false
Tells webpack to use readable chunk identifiers for better debugging. This option is enabled by default for mode development
and disabled for mode production
if no option is provided in webpack config.
webpack.config.js
module.exports = { //... optimization: { namedChunks: true } };
optimization.nodeEnv
string
bool: false
Tells webpack to set process.env.NODE_ENV
to a given string value. optimization.nodeEnv
uses DefinePlugin unless set to false
. optimization.nodeEnv
defaults to mode if set, else falls back to "production"
.
Possible values:
process.env.NODE_ENV
to.process.env.NODE_ENV
.webpack.config.js
module.exports = { //... optimization: { nodeEnv: 'production' } };
optimization.mangleWasmImports
bool: false
When set to true
tells webpack to reduce the size of WASM by changing imports to shorter strings. It mangles module and export names.
webpack.config.js
module.exports = { //... optimization: { mangleWasmImports: true } };
optimization.removeAvailableModules
bool: true
Tells webpack to detect and remove modules from chunks when these modules are already included in all parents. Setting optimization.removeAvailableModules
to false
will disable this optimization.
webpack.config.js
module.exports = { //... optimization: { removeAvailableModules: false } };
optimization.removeEmptyChunks
bool: true
Tells webpack to detect and remove chunks which are empty. Setting optimization.removeEmptyChunks
to false
will disable this optimization.
webpack.config.js
module.exports = { //... optimization: { removeEmptyChunks: false } };
optimization.mergeDuplicateChunks
bool: true
Tells webpack to merge chunks which contain the same modules. Setting optimization.mergeDuplicateChunks
to false
will disable this optimization.
webpack.config.js
module.exports = { //... optimization: { mergeDuplicateChunks: false } };
optimization.flagIncludedChunks
bool
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. By default optimization.flagIncludedChunks
is enabled in production
mode and disabled elsewise.
webpack.config.js
module.exports = { //... optimization: { flagIncludedChunks: true } };
optimization.occurrenceOrder
bool
Tells webpack to figure out an order of modules which will result in the smallest initial bundle. By default optimization.occurrenceOrder
is enabled in production
mode and disabled elsewise.
webpack.config.js
module.exports = { //... optimization: { occurrenceOrder: false } };
optimization.providedExports
bool
Tells webpack to figure out which exports are provided by modules to generate more efficient code for export * from ...
. By default optimization.providedExports
is enabled.
webpack.config.js
module.exports = { //... optimization: { providedExports: false } };
optimization.usedExports
bool
Tells webpack to determine used exports for each module. This depends on optimization.providedExports
. Information collected by optimization.usedExports
is used by other optimizations or code generation i.e. exports are not generated for unused exports, export names are mangled to single char identifiers when all usages are compatible. Dead code elimination in minimizers will benefit from this and can remove unused exports. By default optimization.usedExports
is enabled in production
mode and disabled elsewise.
webpack.config.js
module.exports = { //... optimization: { usedExports: true } };
optimization.concatenateModules
bool
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
. By default optimization.concatenateModules
is enabled in production
mode and disabled elsewise.
webpack.config.js
module.exports = { //... optimization: { concatenateModules: true } };
optimization.sideEffects
bool
Tells webpack to recognise the sideEffects
flag in package.json
or rules to skip over modules which are flagged to contain no side effects when exports are not used.
package.json
{ "name": "awesome npm module", "version": "1.0.0", "sideEffects": false }
Please note thatsideEffects
should be in the npm module'spackage.json
file and doesn't mean that you need to setsideEffects
tofalse
in your own project'spackage.json
which requires that big module.
optimization.sideEffects
depends on optimization.providedExports
to be enabled. This dependency has a build time cost, but eliminating modules has positive impact on performance because of less code generation. Effect of this optimization depends on your codebase, try it for possible performance wins.
By default optimization.sideEffects
is enabled in production
mode and disabled elsewise.
webpack.config.js
module.exports = { //... optimization: { sideEffects: true } };
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/optimization