webpack与rollup打包工具
webpack与rollup打包工具
冷静 && 勤思考
一、rollup
rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，
例如 library 或应用程序。rollup 对代码模块使用新的标准化格式(es6模块语法)特点：Tree-shaking
首先，ES6 模块语法(import、export)实现了静态加载。
rollup 静态分析了代码中的 import , 并将排除任何未实际引用的代码
所以可以生成轻量、快速，以及低复杂度的 library 和应用程序。示例
//foo.js
const foo = () => {
console.log('hello rollup');
};
export { foo };
//index.js
import { foo } from './foo';
foo();打包后的结果
(function() {
'use strict';
var foo = function foo() {
console.log('jx rollup');
};
foo();
}());即rollup的解释是在构建代码阶段，在使用ES6模块化的代码中，借助ES6模块的静态分析，会对你的代码进行静态分析，只打包使用到的代码，减少代码体积。
二、在webpack中使用tree-shaking
在webpackde的构建结果中，执行自治性函数，在Manifest记录依赖关系，通过_webpackrequire__加载，在__webpack_module_cache__记录缓存。
需要使用uglify插件压缩无用代码。
三、总结
webpack构建体积比rollup的格式大。
代码执行的时候，rollup中iife输出格式，代码执行的速度更快，webpack构建出来的还有依赖查找，而且每个模块通过一个函数包裹形式，执行的时候，就形成了一个个的闭包，占用了内存，当然可以在webpack3使用 ConcatenationPlugin 插件优化这样的输出格式，打包到一个依赖中。
webpack做的tree shaking主要是依赖 UglifyJS 来做的，webpack只是识别无用的export，并且不导出，剩下来的Dead code elimation 都是有Uglify来做。
漫思
