前端打包技术行情

　　最近忙了不少，顺便研究了一下打包的一些技术行情。话说前端代码为什么要打包?我最早写前端的时候，那是不打包的。当然技术只是用了简单的jQuery和backbone。后来做angular，有前端模块化开发的思想的时候，前端就需要考虑打包了。为什么，因为单个js文件引入到页面是跑不起来的，不像之间简单页面，一个js文件就搞定了。对于现在大型的工程化应用，前端一般都是有组件化、模块化的开发思路，这样可以实现组件或者模块或者通用逻辑的复用。所以在代码部署的时候需要打包工具来找到当前页面需要哪些js代码组合起来才能正常运行。

前端打包

　　其实可以简单理解，模块化开发之前JS代码都是单兵作战。有了现代框架，模块化的开发思想之后，JS都是组团搞事情了。打包工具的功能其实很简单，就是找到每个页面所需要的JS代码，然后按照一定的依赖顺序，打包到一个JS文件中，然后在部署代码的时候，页面上只要引用这一个js文件就可以了，这样同时也是减少网络请求。

　　这里简单列举一下我所遇到的打包工具：

　　grunt：grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查。

　　参考： https://github.com/woai30231/frontend-build-tools-note/tree/master/grunt

　　gulp：基于流的自动化构建工具。基于文件流的操作，压缩文件，合并文件，简单语法检查等功能。

　　参考： http://www.gulpjs.com.cn/docs/

　　r.js: r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。

　　参考：http://blog.csdn.net/u011551941/article/details/48135869

　　webpack：前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

　　参考：http://www.w2bc.com/Article/50764

　　NEJ：前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。功能其实和webpack差不多，但是目前打包所支持的模块主要是采用NEJ框架所编写的模块和一些静态资源，比如css，html等。

　　参考：http://nej.netease.com/

　　rollup: Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES6 modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively, but Rollup lets you do it today.简单说下rollup就是只将调用过的模块打包，做到尽量精简的打包。

　　参考：https://rollupjs.org/

　　webpack2: 这里之所以单独列出来，是强调一下webpack2增加了tree-shaking，减少打包体积。

　　打包效率

　　从上面的打包工具趋势上可以看出，打包越来越精细，渗透越来越深入，可见一入前端深似海。

　　说说怎么提高打包效率吧，不仅是打包快，还要打包精细。ES6已经支持导入模块的函数，那么打包其实也是可以精细到函数级别。以往可能是需要引入整个js模块的代码，而现在只需要将引用的函数打包进来就可以了。

　　tree-shaking 这个概念最初是由 rollup 提出来的，从字面意思来理解，摇动一棵树，枯枝败叶就会掉下来，看起来是指去掉不需要的代码，和 DCE (dead code elimination，死代码消除)差不多。不过，它和DCE还是有区别的，用作者自己的话来说，DCE是去除死代码，而tree-shaking是保留活代码，是实现DCE的一种方式。

　　众所周知，commonjs模块是动态加载的，且可以重命名，要想在静态分析阶段判断哪些代码不会被执行到，有一定难度，需要借助数据流分析。所以tree-shaking是借助了ES6的模块机制，通过import/export等关键字来定义输入输出的方法，且其重命名只能通过 as 这个关键字，模块一旦被import进来，就是只读的，这样，我们只根据名字，就可以从入口文件一路溯源到模块定义处，只把用到的方法打包进来。

　　要想使用tree-shaking，需要解析ES6模块语法，webpack2是借助于 acorn 实现这一点的。在拿到AST之后，webpack2会统计每个模块export的方法被使用的次数，并把没有用到的export语句删掉。至于没有被export的定义，则要在后续的DCE(dead code elimination)过程中消除。import/export之外的ES6代码，要使用Babel进行转码，因为acorn只有解析功能，但没有转换功能。

　　示例代码如下：

----------------- helpers.js

export function foo() { return 'foo'; } export function bar() { return 'bar'; }

main.js

import {foo} from './helpers'; let elem = document.getElementById('output'); elem.innerHTML = `Output: ${foo()}`;

----------------- helpers.bundle.js (// after webpack)

function(module, exports, __webpack_require__) { /* harmony export */ exports["foo"] = foo; /* unused harmony export bar */; function foo() { return 'foo'; } function bar() { return 'bar'; } }

----------------- helpers.bundle.min.js (// after uglify)

function (t, n, r) { function e() { return "foo" } n.foo = e }