前端高级进阶2：javascript 代码是如何被压缩的

最新推荐文章于 2024-07-23 10:00:00 发布

weixin-sjk6070

最新推荐文章于 2024-07-23 10:00:00 发布

阅读量265

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chunzhenwang/article/details/104512525

版权

本文探讨了前端代码，尤其是JavaScript资源的压缩优化，强调了减小体积对用户体验和企业利润的重要性。通过webpack的optimization.minimizer，介绍了如何使用UglifyJS3进行代码压缩，包括删除多余字符、压缩变量名、合并声明和布尔值简化等步骤，并提到了AST在压缩过程中的关键作用。

摘要由CSDN通过智能技术生成

这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带_点个赞，如果没有点进去的话，那就给这篇文章点个赞。。今天的文章开始了
本篇文章地址在前端工程化系列，欢迎订阅。

随着前端的发展，特别是 React，Vue 等构造单页应用的兴起，前端的能力得以很大提升，随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大，而毫无疑问 javascript 资源已是前端的主体资源，对于压缩它的体积至为重要。
为什么说更小的体积很重要呢：更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验，这也能早就企业更大的利润。另外，更小的体积对于服务器来说也意味更小的带宽以及更少的服务器费用。
前端构建编译代码时，可以使用 webpack 中的 optimization.minimizer 来对代码进行压缩优化。但是我们也需要了解如何它是压缩代码的，这样当在生产环境的控制台调试代码时对它也有更深刻的理解。
如何查看资源的体积
对于我们所编写的代码，它在操作系统中是一个文件，根据文件系统中的 stat 信息我们可以查看该文件的大小。
stat 命令用来打印文件系统的信息：
$ stat config.js
File: ‘config.js’
Size: 3663 Blocks: 8 IO Block: 4096 regular file
Device: fd01h/64769d Inode: 806060 Links: 1
Access: (0644/-rw-r–r--) Uid: ( 0/ root) Gid: ( 0/ root)