webpack常用配置
在 Webpack 配置中,config.optimization.runtimeChunk('single')
和 config.optimization.usedExports(true)
是两个关键的优化选项,分别用于优化代码分割和 Tree Shaking。以下是它们的具体作用和实现原理:
1. runtimeChunk('single')
作用
- 提取 Webpack 运行时代码 :将 Webpack 的运行时逻辑(如模块加载、依赖解析等)从入口文件分离到单独的
runtime.js
文件中。 - 优化缓存策略:运行时代码通常体积小但频繁变化,单独提取后可以避免因入口文件内容变化而导致的缓存失效。
实现原理
-
默认行为 :未配置时,运行时代码会嵌入到每个入口文件(如
main.js
)中。 -
配置为
'single'
:所有入口共享一个runtime.js
,减少重复代码。 -
示例输出:
bashdist/ ├── runtime.123456.js # Webpack 运行时逻辑 ├── main.abc123.js # 主入口文件 └── vendor.def456.js # 第三方依赖
适用场景
- 多入口应用:多个页面共享同一份运行时代码。
- 长期缓存优化:利用浏览器缓存,减少重复下载。
2. usedExports(true)
作用
- 启用 Tree Shaking:通过静态代码分析标记未被使用的导出(exports),供后续压缩工具(如 Terser)删除。
- 减少代码体积:移除未使用的模块代码,优化生产环境构建结果。
实现原理
-
标记阶段 :Webpack 分析代码,识别未被引用的
export
。 -
删除阶段 :在压缩阶段(如
TerserPlugin
)清除标记为未使用的代码。 -
代码示例:
javascript// math.js export function add(a, b) { return a + b; } // 被使用 export function subtract(a, b) { return a - b; } // 未使用 // app.js import { add } from './math.js'; console.log(add(1, 2));
构建后 :
subtract
函数会被删除。
注意事项
- 依赖 ES 模块语法 :仅对
import/export
生效,CommonJS 模块无法优化。 - 避免副作用 :需在
package.json
中设置"sideEffects": false
,或明确列出有副作用的文件。
组合使用效果
javascript
// webpack.config.js
module.exports = {
optimization: {
runtimeChunk: 'single', // 提取运行时
usedExports: true, // 启用 Tree Shaking
minimize: true, // 压缩代码(需配合 Terser)
splitChunks: {
chunks: 'all', // 公共模块拆分
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors'
}
}
}
}
};
构建结果:
runtime.js
:独立文件,包含 Webpack 运行时逻辑。main.js
:仅包含业务代码,移除未使用的导出。vendors.js
:第三方依赖代码,单独分包。
关键配置对比
配置项 | 作用 | 适用场景 | 依赖条件 |
---|---|---|---|
runtimeChunk('single') |
分离运行时代码,优化缓存 | 多入口、需长期缓存的项目 | Webpack 4+ |
usedExports(true) |
标记未使用代码,支持 Tree Shaking | 生产环境构建 | ES 模块语法 + 压缩工具 |
常见问题
Q1: 为什么 usedExports
开启了但代码未删除?
- 未启用压缩 :需确保
optimization.minimize: true
。 - 存在副作用 :模块包含副作用代码(如
polyfill
),需配置sideEffects
字段。
Q2: runtime.js
需要手动引入吗?
- 自动注入 :Webpack 生成的 HTML 文件会自动插入
runtime.js
,无需手动处理。
Q3: 如何验证 Tree Shaking 生效?
- 分析工具 :使用
webpack-bundle-analyzer
查看打包内容。 - 代码检查 :在产物中搜索未使用的函数名(如
subtract
)。
总结
runtimeChunk('single')
:优化代码分割和缓存,适合多入口项目。usedExports(true)
:启用 Tree Shaking,减少生产环境代码体积。- 协同工作:二者结合可显著提升应用性能,但需确保模块语法和构建配置正确。