小程序打包的dist代碼太大,上傳不上,提示代碼包太大
這些配置都是針對(duì) Terser 的設(shè)置,Terser 是 Webpack 默認(rèn)使用的 JavaScript 代碼壓縮工具。這些設(shè)置只在生產(chǎn)環(huán)境(process.env.NODE_ENV === 'production'
)生效,用于優(yōu)化和壓縮最終生成的代碼。
解釋
- config.optimization.minimizer[0].options.terserOptions.compress.warnings = false作用:禁止 Terser 在壓縮過程中輸出警告信息效果:使構(gòu)建輸出更簡(jiǎn)潔,減少無關(guān)警告的干擾
- config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true作用:移除代碼中所有的 console.* 調(diào)用效果:刪除所有 console 語(yǔ)句,如 console.log(), console.error() 等,減小代碼體積并避免生產(chǎn)環(huán)境輸出調(diào)試信息
- config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true作用:移除所有的 debugger 語(yǔ)句效果:刪除代碼中的調(diào)試斷點(diǎn),防止在生產(chǎn)環(huán)境中暫停代碼執(zhí)行
- config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']作用:指定哪些函數(shù)調(diào)用可以被安全移除(當(dāng)返回值未被使用時(shí))效果:明確移除 console.log() 調(diào)用,這是對(duì) drop_console 的補(bǔ)充,確保所有 console.log 都被移除
綜合效果
這些配置共同作用,實(shí)現(xiàn)了:
- 移除調(diào)試代碼(console 和 debugger)
- 減小代碼體積
- 使生產(chǎn)環(huán)境代碼更簡(jiǎn)潔、更安全
- 避免泄露調(diào)試信息到生產(chǎn)環(huán)境
這些是 Vue/Webpack 項(xiàng)目常見的生產(chǎn)環(huán)境優(yōu)化配置,有助于提高應(yīng)用性能和安全性。
除此之外還有一些圖片壓縮【文件體積減少 30%-70%】,css壓縮【減小文件體積:通常可以減少 20%-50% 的大小】,還有其他的一些壓縮方式