webpack代码压缩

代码压缩插件

• 使用 TerserWebpackPlugin 压缩 JS（webpack5已内置）
• 使用 CssMinimizerWebpackPlugin 压缩 CSS
• 使用 html-minimizer-webpack-plugin 压缩 HTML
• 使用 image-webpack-loader 压缩图像资源

代码压缩与代码混淆

代码压缩 是指在不改变代码功能的前提下，从声明式（HTML、CSS）或命令式（JavaScript）语言中删除所有不必要的字符（备注、变量名压缩、逻辑语句合并等），减少代码体积的过程，这在 Web 场景中能够有效减少浏览器从服务器获取代码资源所需要消耗的传输量，降低网络通讯耗时，提升页面启动速度，是一种非常基础且性价比特别高的应用性能优化方案。

代码压缩侧重的是减少代码体积，而代码混淆侧重的是降低代码可读性，从而达到保护代码，降低代码被别有用心的人利用的目的。

个人认为，代码压缩是代码混淆的一种实现手段，因为代码压缩必然会导致代码可读性降低，但代码混淆的手段却不止有代码压缩，并且代码混淆有时候还会导致代码体积的膨胀，比如说现在常用到的流程平坦化，这种混淆方式就会使代码体积膨胀，但对于降低可读性却具有重要作用。所以说，代码压缩和代码混淆的概念不是等价的。

代码混淆可以用webpack-obfuscator