Webpack支持通过TerserWebpackPlugin插件实现JavaScript代码压缩。其核心原理是移除不必要的字符和语句，以及进行代码的丑化处理，从而显著减小代码体积。CssMinimizerWebpackPlugin与cssnano工具协作，专门针对CSS进行优化与压缩，进一步精简样式代码。HTMLMinifier是一个基于JavaScript的HTML压缩工具，旨在减少HTML文件的...
Webpack 优化实操十二：代码压缩
在Webpack实践系列文章的第十二篇，我们将探索代码压缩的奥秘，通过使用特定的插件实现JavaScript、CSS以及HTML的优化。
Webpack支持通过TerserWebpackPlugin插件实现JavaScript代码压缩。其核心原理是移除不必要的字符和语句，以及进行代码的丑化处理，从而显著减小代码体积。
CssMinimizerWebpackPlugin与cssnano工具协作，专门针对CSS进行优化与压缩，进一步精简样式代码。
HTMLMinifier是一个基于JavaScript的HTML压缩工具，旨在减少HTML文件的大小，但需注意在进行压缩时，应进行充分的测试，以确保功能完整性和兼容性不受影响。
对于使用了Tailwind CSS的项目，如Admin项目，CSS压缩插件可能不太适用。在进行HTML压缩时，同样需进行详尽测试，确保压缩过程不会影响到项目功能与兼容性。
Webpack默认启用代码压缩，但为了明确操作，我们可通过添加配置来关闭这一功能，然后根据需要重新启用。
启用压缩的配置，旨在清除代码中的console和debugger等无关内容，并进行代码优化。值得注意的是，开启更高级的优化配置时，需确保不会影响到项目功能与兼容性。
通过启用压缩，我们观察到代码体积从大约5M大幅缩减至仅1M多，显著提高了文件传输速度与性能。
本文内容基于极客时间《前端进阶特训营》课程学习笔记，建议大家也去深入学习，收获更多前端进阶知识。2024-11-01
