扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了JavaScript打包压缩工具的用法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
创新互联公司专注于企业成都营销网站建设、网站重做改版、蔡家坡网站定制设计、自适应品牌网站建设、html5、成都做商城网站、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为蔡家坡等各大城市提供网站开发制作服务。背景
平时大家在开发 Js 项目的时候，可能已经离不开 webpack 等打包工具了。而 webpack 打包速度大概就是“能用“的水平。大概去年开始，我就开始在构想，如果能写一个极速的打包工具，功能未必需要很强，可能对小项目非常有用。去年我用 C++ 写完 parser 之后，便没什么动力写下去了。但是最近发现有这个想法的不止我一个，Figma 的 CTO 业余之际写了一个打包器 https://github.com/evanw/esbuild ，可以说完完全全实现了我想象中的需求，不过他是用 Go 语言实现的。我看到这个项目时心里一想，这不是我去年就想做的事吗，这 push 我赶紧把打包压缩部分完成。
代码
Github 地址： https://github.com/vincentdchan/jetpack.js
优化思路
并行 Parsing
毫无疑问，每一个 js 文件的 parsing 可以在不同线程完成，这就需要支持并行的语言。由于 parsing 的结果是 AST，所以需要可以共享内存的语言（排除通过 messeage parsing 实现多线程的语言）。满足以上两个要求的语言不多。 Evan 选择了 Go，我选择了 C++。
减少遍历次数
要想速度快，就要减少 AST 的遍历次数。最好就是只遍历一次来生成代码，在 Parsing 构建 AST 的时候就收集足够的信息。但是这也意味着只能做比较浅层次的优化，不能做深层次的压缩（死代码消除，tree shaking 都做不了）。
架构
由上述思路我总结出了以下打包的架构：
流程图如下：
打包压缩原理
本章节主要讲如何“最简单“地压缩 Js 代码。本章节假设读者对编译原理有一定了解，知道什么是 AST。如果不懂请直接跳到下文「性能」章节。
字面量替换
字面替换最简单。规则有一下几个：
void 0!0 , false 替换为 !1:warning: 注意：在 ES 中，undefined 是标识符（Identifier)，而不是关键字，也就是说你可以定义一个叫 undefined 的变量，所以这个时候不能简单地替换为 void 0
常量折叠
计算简单的运算：
var two = 1 + 1; var foobar = 'foo' + 'bar';
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网