如何在开发环境实现 webpack 4 production mode 的压缩效果?
需求和背景
commonjs 写的云函数代码,用 webpack 打包,然后在开发环境(mode=development|none)时打包出来的代码超出运行环境的限制了,因为希望在开发环境也能进行压缩。
尝试和结果
看到 webpack mode production 里列出的配置,于是搬到开发环境,最终的配置大概如下:
{
mode: "none",
target: 'node',
optimization: {
minimize: true,
sideEffects: false,
usedExports: true,
concatenateModules: true,
namedModules: false,
namedChunks: false,
occurrenceOrder: true,
checkWasmTypes: true,
nodeEnv: 'production',
flagIncludedChunks: true,
splitChunks: {
hidePathInfo: true,
minSize: 30000,
maxAsyncRequests: 5,
maxInitialRequests: 3,
},
noEmitOnErrors: true,
},
plugins: [new TerserPlugin({
terserOptions: {
ecma: 5,
compress: {
passes: 4,
arrows: true,
dead_code: true,
drop_debugger: true,
evaluate: true,
side_effects: true,
module: true,
},
mangle: true,
nameCache: {},
}
})]
}
运行构建后,输出的包大小是 3.8M, 而只要把 mode 改成 production,输出包的大小就变成了 1.4M,看起来上面这些配置并不能起到 mode=production 的作用。
问题
请问 mode=production 还做了些什么工作?如何在开发环境实现 mode=production 的压缩效果?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论