webpack与rollup打包工具

webpack与rollup打包工具

jxZheng

冷静 && 勤思考

​关注他

 

 

一、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来做。