免費AI編程助手
Webpack Optimization(優(yōu)化)
從 webpack 4 開始，會根據(jù)你選擇的 mode 來執(zhí)行不同的優(yōu)化， 不過所有的優(yōu)化還是可以手動配置和重寫。
optimization.chunkIds
?boolean = false string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'?
告知 webpack 當(dāng)選擇模塊 id 時需要使用哪種算法。將 optimization.chunkIds 設(shè)置為 false 會告知 webpack 沒有任何內(nèi)置的算法會被使用，但自定義的算法會由插件提供。optimization.chunkIds 的默認值是 false：
- 如果環(huán)境是開發(fā)環(huán)境，那么 optimization.chunkIds 會被設(shè)置成 'named'，但當(dāng)在生產(chǎn)環(huán)境中時，它會被設(shè)置成 'deterministic'
- 如果上述的條件都不符合, optimization.chunkIds 會被默認設(shè)置為 'natural'
下述選項字符串值均為被支持：
| 選項值 | 描述 |
|---|---|
'natural'
|
按使用順序的數(shù)字 id。 |
'named'
|
對調(diào)試更友好的可讀的 id。 |
'deterministic'
|
在不同的編譯中不變的短數(shù)字 id。有益于長期緩存。在生產(chǎn)模式中會默認開啟。 |
'size'
|
專注于讓初始下載包大小更小的數(shù)字 id。 |
'total-size'
|
專注于讓總下載包大小更小的數(shù)字 id。 |
webpack.config.js
module.exports = {
//...
optimization: {
chunkIds: 'named',
},
};默認地，當(dāng) optimization.chunkIds 被設(shè)置為 'deterministic' 時，最少 3 位數(shù)字會被使用。要覆蓋默認的行為，要將 optimization.chunkIds 設(shè)置為 false，同時要使用 webpack.ids.DeterministicChunkIdsPlugin。
webpack.config.js
module.exports = {
//...
optimization: {
chunkIds: false,
},
plugins: [
new webpack.ids.DeterministicChunkIdsPlugin({
maxLength: 5,
}),
],
};optimization.concatenateModules
?boolean?
告知 webpack 去尋找模塊圖形中的片段，哪些是可以安全地被合并到單一模塊中。這取決于 optimization.providedExports 和 optimization.usedExports。 默認 optimization.concatenateModules 在 生產(chǎn) 模式 下被啟用，而在其它情況下被禁用。
webpack.config.js
module.exports = {
//...
optimization: {
concatenateModules: true,
},
};optimization.emitOnErrors
?boolean = false?
使用 optimization.emitOnErrors 在編譯時每當(dāng)有錯誤時，就會發(fā)送靜態(tài)資源。這樣可以確保出錯的靜態(tài)資源被發(fā)送出來。關(guān)鍵錯誤會被發(fā)送到生成的代碼中，并會在運行時報錯。
webpack.config.js
module.exports = {
//...
optimization: {
emitOnErrors: true,
},
};optimization.flagIncludedChunks
?boolean?
告知 webpack 確定和標記出作為其他 chunk 子集的那些 chunk，其方式是在已經(jīng)加載過較大的 chunk 之后，就不再去加載這些 chunk 子集。optimization.flagIncludedChunks 默認會在 production 模式 中啟用，其他情況禁用。
webpack.config.js
module.exports = {
//...
optimization: {
flagIncludedChunks: true,
},
};optimization.innerGraph
?boolean = true?
optimization.innerGraph 告知 webpack 是否對未使用的導(dǎo)出內(nèi)容，實施內(nèi)部圖形分析(graph analysis)。
webpack.config.js
module.exports = {
//...
optimization: {
innerGraph: false,
},
};optimization.mangleExports
?boolean string: 'deterministic' | 'size'?
optimization.mangleExports 允許控制導(dǎo)出處理(export mangling)。
默認 optimization.mangleExports: 'deterministic' 會在 production 模式下 啟用而其它情況會被禁用。
此選項支持以下選項：
| 選項 | 描述 |
|---|---|
'size'
|
簡寫形式 — 通常只有一個字符 — 專注于最小的下載 size。 |
'deterministic'
|
簡寫形式 - 通常兩個字符 — 在添加或移除 export 時不會改變。適用于長效緩存。 |
true
|
等價于 'deterministic'
|
false
|
保留原名，有利于閱讀和調(diào)試。 |
webpack.config.js
module.exports = {
//...
optimization: {
mangleExports: true,
},
};optimization.mangleWasmImports
?boolean = false?
在設(shè)置為 true 時，告知 webpack 通過將導(dǎo)入修改為更短的字符串，來減少 WASM 大小。這會破壞模塊和導(dǎo)出名稱。
webpack.config.js
module.exports = {
//...
optimization: {
mangleWasmImports: true,
},
};optimization.mergeDuplicateChunks
?boolean = true?
告知 webpack 合并含有相同模塊的 chunk。將 optimization.mergeDuplicateChunks 設(shè)置為 false 以禁用這項優(yōu)化。
webpack.config.js
module.exports = {
//...
optimization: {
mergeDuplicateChunks: false,
},
};optimization.minimize
?boolean = true?
告知 webpack 使用 TerserPlugin 或其它在 optimization.minimizer定義的插件壓縮 bundle。
webpack.config.js
module.exports = {
//...
optimization: {
minimize: false,
},
};optimization.minimizer
?[TerserPlugin]? 或 ?[function (compiler)]?
允許你通過提供一個或多個定制過的 TerserPlugin 實例，覆蓋默認壓縮工具(minimizer)。
webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
},
}),
],
},
};或使用函數(shù)的形式：
module.exports = {
optimization: {
minimizer: [
(compiler) => {
const TerserPlugin = require('terser-webpack-plugin');
new TerserPlugin({
/* 你的配置 */
}).apply(compiler);
},
],
},
};在 optimization.minimizer 中可以使用 '...' 來訪問默認值。
module.exports = {
optimization: {
minimizer: [new CssMinimizer(), '...'],
},
};optimization.moduleIds
?boolean: false string: 'natural' | 'named' | 'deterministic' | 'size'?
告知 webpack 當(dāng)選擇模塊 id 時需要使用哪種算法。將 optimization.moduleIds 設(shè)置為 false 會告知 webpack 沒有任何內(nèi)置的算法會被使用，但自定義的算法會由插件提供。
下述選項字符串值均為被支持:
| 選薦值 | 描述 |
|---|---|
natural
|
按使用順序的數(shù)字 id。 |
named
|
對調(diào)試更友好的可讀的 id。 |
deterministic
|
被哈希轉(zhuǎn)化成的小位數(shù)值模塊名。 |
size
|
專注于讓初始下載包大小更小的數(shù)字 id。 |
webpack.config.js
module.exports = {
//...
optimization: {
moduleIds: 'deterministic',
},
};deterministic 選項有益于長期緩存，但對比于 hashed 來說，它會導(dǎo)致更小的文件 bundles。數(shù)字值的長度會被選作用于填滿最多 80%的 id 空間。當(dāng) optimization.moduleIds 被設(shè)置成 deterministic，默認最小 3 位數(shù)字會被使用。要覆蓋默認行為，要將 optimization.moduleIds 設(shè)置成 false，并且要使用 webpack.ids.DeterministicModuleIdsPlugin。
webpack.config.js
module.exports = {
//...
optimization: {
moduleIds: false,
},
plugins: [
new webpack.ids.DeterministicModuleIdsPlugin({
maxLength: 5,
}),
],
};optimization.nodeEnv
?boolean = false string?
告知 webpack 將 process.env.NODE_ENV 設(shè)置為一個給定字符串。如果 optimization.nodeEnv 不是 false，則會使用 DefinePlugin，optimization.nodeEnv 默認值取決于 mode，如果為 falsy 值，則會回退到 "production"。
可能的值有：
- 任何字符串：用于設(shè)置 process.env.NODE_ENV 的值。
- false：不修改/設(shè)置 process.env.NODE_ENV的值。
webpack.config.js
module.exports = {
//...
optimization: {
nodeEnv: 'production',
},
};optimization.portableRecords
?boolean?
optimization.portableRecords 告知 webpack 生成帶有相對路徑的記錄(records)使得可以移動上下文目錄。
默認 optimization.portableRecords 被禁用。如果下列至少一個選項在 webpack 中被設(shè)置，該選項也會自動啟用：recordsPath, recordsInputPath， recordsOutputPath。
webpack.config.js
module.exports = {
//...
optimization: {
portableRecords: true,
},
};optimization.providedExports
?boolean?
告知 webpack 去確定那些由模塊提供的導(dǎo)出內(nèi)容，為 export * from ... 生成更多高效的代碼。默認 optimization.providedExports 會被啟用。
webpack.config.js
module.exports = {
//...
optimization: {
providedExports: false,
},
};optimization.realContentHash
?boolean = true?
在處理靜態(tài)資源后添加額外的哈希編譯，以獲得正確的靜態(tài)資源內(nèi)容哈希。如果 realContentHash 設(shè)置為 false，內(nèi)部數(shù)據(jù)用于計算哈希值，當(dāng)靜態(tài)資源相同時，它可以改變。
webpack.config.js
module.exports = {
//...
optimization: {
realContentHash: false,
},
};optimization.removeAvailableModules
?boolean = false?
如果模塊已經(jīng)包含在所有父級模塊中，告知 webpack 從 chunk 中檢測出這些模塊，或移除這些模塊。將 optimization.removeAvailableModules 設(shè)置為 true 以啟用這項優(yōu)化。在 production 模式 中默認會被開啟。
webpack.config.js
module.exports = {
//...
optimization: {
removeAvailableModules: true,
},
};optimization.removeEmptyChunks
?boolean = true?
如果 chunk 為空，告知 webpack 檢測或移除這些 chunk。將 optimization.removeEmptyChunks 設(shè)置為 false 以禁用這項優(yōu)化。
webpack.config.js
module.exports = {
//...
optimization: {
removeEmptyChunks: false,
},
};optimization.runtimeChunk
?object string boolean?
將 optimization.runtimeChunk 設(shè)置為 true 或 'multiple'，會為每個入口添加一個只含有 runtime 的額外 chunk。此配置的別名如下：
webpack.config.js
module.exports = {
//...
optimization: {
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}`,
},
},
};值 "single" 會創(chuàng)建一個在所有生成 chunk 之間共享的運行時文件。此設(shè)置是如下設(shè)置的別名：
webpack.config.js
module.exports = {
//...
optimization: {
runtimeChunk: {
name: 'runtime',
},
},
};通過將 optimization.runtimeChunk 設(shè)置為 object，對象中可以設(shè)置只有 name 屬性，其中屬性值可以是名稱或者返回名稱的函數(shù)，用于為 runtime chunks 命名。
默認值是 false：每個入口 chunk 中直接嵌入 runtime。
webpack.config.js
module.exports = {
//...
optimization: {
runtimeChunk: {
name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
},
},
};optimization.sideEffects
?boolean = true string: 'flag'?
告知 webpack 去辨識 package.json 中的 副作用 標記或規(guī)則，以跳過那些當(dāng)導(dǎo)出不被使用且被標記不包含副作用的模塊。
package.json
{
"name": "awesome npm module",
"version": "1.0.0",
"sideEffects": false
}optimization.sideEffects 取決于 optimization.providedExports 被設(shè)置成啟用。這個依賴會有構(gòu)建時間的損耗，但去掉模塊會對性能有正面的影響，因為更少的代碼被生成。該優(yōu)化的效果取決于你的代碼庫， 可以嘗試這個特性以獲取一些可能的性能優(yōu)化。
webpack.config.js
module.exports = {
//...
optimization: {
sideEffects: true,
},
};只使用手動 flag，并且不對源碼進行分析：
module.exports = {
//...
optimization: {
sideEffects: 'flag',
},
};此處的 'flag' 值在非生產(chǎn)環(huán)境默認使用。
optimization.splitChunks
?object?
對于動態(tài)導(dǎo)入模塊，默認使用 webpack v4+ 提供的全新的通用分塊策略(common chunk strategy)。請在 SplitChunksPlugin 頁面中查看配置其行為的可用選項。
optimization.usedExports
?boolean = true string: 'global'?
告知 webpack 去決定每個模塊使用的導(dǎo)出內(nèi)容。這取決于 optimization.providedExports 選項。由 optimization.usedExports 收集的信息會被其它優(yōu)化手段或者代碼生成使用，比如未使用的導(dǎo)出內(nèi)容不會被生成，當(dāng)所有的使用都適配，導(dǎo)出名稱會被處理做單個標記字符。 在壓縮工具中的無用代碼清除會受益于該選項，而且能夠去除未使用的導(dǎo)出內(nèi)容。
webpack.config.js
module.exports = {
//...
optimization: {
usedExports: false,
},
};選擇退出每次運行時使用 export 分享：
module.exports = {
//...
optimization: {
usedExports: 'global',
},
};Further Reading
更多建議：