多入口 tree shaking 优化的核心在于确保 webpack 5 的 optimization.sideeffects 为 true，并在 package.json 中正确声明副作用。这能让构建工具在多个入口点之间安全地移除未使用的导出，从而减小最终打包体积。
如何配置 sideEffects 以支持多入口优化？
在多入口项目中，必须通过 sideEffects 字段告知 Webpack 哪些文件包含副作用（如全局样式或 polyfill）。如果配置不当，Webpack 会为了安全起见保留所有代码，导致优化失效。正确的做法是在 package.json 中列出非副作用文件，或者明确标记包含副作用的文件。
{
"name": "multi-entry-app",
"version": "1.0.0",
"sideEffects": [
"./src/styles/global.css",
"./src/polyfills.js"
]
}
上述配置告诉 Webpack，除了列出的 CSS 和 polyfill 文件外，其他 JS 文件都是纯函数式的，可以安全地进行摇树优化。当多个入口点（如 entry: { app: './src/app.js', admin: './src/admin.js' }）共享同一个库时，Webpack 会分析这些入口的使用情况，只保留被引用的导出。
立即学习“Java免费学习笔记（深入）”；
多入口场景下如何避免重复打包公共代码？
除了 Tree Shaking，多入口项目还需要通过 splitChunks 提取公共代码。Webapck 5 默认配置已经相当智能，但针对特定库的优化需要手动调整 cacheGroups。通过将第三方库或常用工具函数放入独立的 chunk，可以避免在每个入口文件中重复打包相同的代码。
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
admin: './src/admin.js'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
priority: 10
},
common: {
minChunks: 2,
priority: 5,
reuseExistingChunk: true
}
}
}
}
};
在这个配置中，vendor 组专门处理 node_modules 中的依赖，而 common 组则处理至少被两个入口点引用的本地代码。这种分层策略确保了公共代码只被打包一次，并通过 reuseExistingChunk 选项进一步减少冗余。
当入口点引用了不同的导出时，Tree Shaking 效果如何体现？
假设 app.js 只使用了 lodash.merge，而 admin.js 使用了 lodash.cloneDeep。由于 lodash 库在 package.json 中声明了 sideEffects: false，Webpack 5 能够精确地只打包这两个特定的方法，而不是整个 lodash 库。这意味着每个入口文件的体积都会显著减小，且不会相互干扰。
