小程序打包的dist代码太大,上传不上,提示代码包太大
这些配置都是针对 Terser 的设置,Terser 是 Webpack 默认使用的 JavaScript 代码压缩工具。这些设置只在生产环境(process.env.NODE_ENV === 'production'
)生效,用于优化和压缩最终生成的代码。
解释
- config.optimization.minimizer[0].options.terserOptions.compress.warnings = false作用:禁止 Terser 在压缩过程中输出警告信息效果:使构建输出更简洁,减少无关警告的干扰
- config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true作用:移除代码中所有的 console.* 调用效果:删除所有 console 语句,如 console.log(), console.error() 等,减小代码体积并避免生产环境输出调试信息
- config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true作用:移除所有的 debugger 语句效果:删除代码中的调试断点,防止在生产环境中暂停代码执行
- config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']作用:指定哪些函数调用可以被安全移除(当返回值未被使用时)效果:明确移除 console.log() 调用,这是对 drop_console 的补充,确保所有 console.log 都被移除
综合效果
这些配置共同作用,实现了:
- 移除调试代码(console 和 debugger)
- 减小代码体积
- 使生产环境代码更简洁、更安全
- 避免泄露调试信息到生产环境
这些是 Vue/Webpack 项目常见的生产环境优化配置,有助于提高应用性能和安全性。
除此之外还有一些图片压缩【文件体积减少 30%-70%】,css压缩【减小文件体积:通常可以减少 20%-50% 的大小】,还有其他的一些压缩方式