如何压缩javascript代码体积

这篇文章主要介绍了如何压缩javascript代码体积，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　随着前端的发展，特别是React，Vue等构造单页应用的兴起，前端的能力得以很大提升，随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大，而毫无疑问javascript资源已是前端的主体资源，对于压缩它的体积至为重要。

　　js压缩的重要性

　　为什么说更小的体积很重要呢：更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验，这也能早就企业更大的利润。另外，更小的体积对于服务器来说也意味更小的带宽以及更少的服务器费用。

　　前端构建编译代码时，可以使用webpack中的optimization.minimizer来对代码进行压缩优化。但是我们也需要了解如何它是压缩代码的，这样当在生产环境的控制台调试代码时对它也有更深刻的理解。

　　如何压缩js代码体积？

　　去除多余字符:空格，换行及注释

　　//对两个数求和
　　functionsum(a,b){
　　returna+b;
　　}

　　先把一个抽象的问题给具体化，如果是以上一段代码，那如何压缩它的体积呢:

　　此时文件大小是62Byte，一般来说中文会占用更大的空间。

　　多余的空白字符会占用大量的体积，如空格，换行符，另外注释也会占用文件体积。当我们把所有的空白符合注释都去掉之后，代码体积会得到减少。

　　去掉多余字符之后，文件大小已经变为30Byte。压缩后代码如下:

　　functionsum(a,b){returna+b}

　　替换掉多余字符后会有什么问题产生呢？

　　有，比如多行代码压缩到一行时要注意行尾分号。这就需要通过以下介绍的AST来解决。

　　压缩变量名：变量名，函数名及属性名

functionsum(first,second){
　　returnfirst+second;
　　}

　　如以上first与second在函数的作用域中，在作用域外不会引用它，此时可以让它们的变量名称更短。但是如果这是一个module中，sum这个函数也不会被导出呢？那可以把这个函数名也缩短。

感谢你能够认真阅读完这篇文章，希望小编分享的“如何压缩javascript代码体积”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!