webpack中tree-shaking技术介绍
之前介绍过webpack3的新特性,里面提到webpack2支持了ES6的import和export,不需要将ES6的模块先转成CommonJS模块,然后再进行打包处理。正基于此,webpack2引入了tree-shaking技术,能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块,而不被引用或不被执行的模块被删除掉,以起到减包的效果。
webpack的tree-shaking案例
下面结合实际代码来解释webpack2是如何实现tree-shaking的,示例代码可到github进行下载。
示例代码结构如图:src中index.js为入口文件,module.js是测试的模块文件,dist中是产出的文件。
根据webpack官网的提示,webpack支持tree-shaking,需要修改配置文件,指定babel处理js文件时不要将ES6模块转成CommonJS模块,具体做法就是:
在.babelrc设置babel-preset-es2015的modules为fasle,表示不对ES6模块进行处理。
// .babelrc文件
{
"presets": [
["es2015", { "modules": false }]
],
"comments": false
}
在webpack.config.js中设置babel-preset-es2015的modules为fasle,表示不对ES6模块进行处理。
// webpack.config.js
...
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
["es2015", { "modules": false }]
]
}
}
]
...
然后在module.js文件中创建三个模块sayHello,sayBye,sayHi,并在index.js引用sayHello,sayHi;
// module.js
export const sayHello = name => `Hello ${name}!`;
export const sayBye = name => `Bye ${name}!`;
export const sayHi = name => `Hi ${name}!`;
// index.js
import { sayHello } from './module';
import { sayHi } from './module';
const element = document.createElement('h1');
element.innerHTML = sayHello('World') + sayHi('my friend');
document.body.appendChild(element);
然后在当前目录执行 webpack 命令后,产出bundle.js的代码如下
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return sayHello; });
/* unused harmony export sayBye */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return sayHi; });
var sayHello = function sayHello(name) {
return "Hello " + name + "!";
};
var sayBye = function sayBye(name) {
return "Bye " + name + "!";
};
var sayHi = function sayHi(name) {
return "Hi " + name + "!";
};
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__module__ = __webpack_require__(0);
var element = document.createElement('h1');
element.innerHTML = Object(__WEBPACK_IMPORTED_MODULE_0__module__["a" /* sayHello */])('World') + Object(__WEBPACK_IMPORTED_MODULE_0__module__["b" /* sayHi */])(' to meet you');
document.body.appendChild(element);
/***/ })
从上面可以知道,sayBye模块被打上了unused harmony export标签,sayHello和sayHi被设置为__webpack_exports__的属性,在入口文件中通过读取__webpack_exports__的属性取出。
bundle.js文件虽然对多余的模块进行了标记,但是并没有删除,这是因为webpack还没有执行压缩混淆操作,可以通过webpack -p命令对产出进行压缩处理,这时候会把打了unused harmony export 标签的模块删除掉。
webpack的tree-shaking的局限性
(1)只能是静态声明和引用的ES6模块,不能是动态引入和声明的;
在打包阶段对冗余代码进行删除,就需要webpack需要在打包阶段确定模块文件的内部结构,而ES模块的引用和输出必须出现在文件结构的第一级('import' and 'export' may only appear at the top level),否则会报错。
// webpack编译时会报错
if (condition) {
import module1 from './module1';
} else {
import module2 from './module2';
}
而CommonJS模块支持动态结构的,所以不能对CommonJS模块进行tree-shaking处理。
(2)只能处理模块级别,不能处理函数级别的冗余;
因为webpack的tree-shaking是基于模块间的依赖关系,所以并不能对模块内部自身的无用代码进行删除。
(3)只能处理JS相关冗余代码,不能处理CSS冗余代码。
目前webpack只对JS文件的依赖进行了处理,CSS的冗余并没有给出很好的工具。最近听了一个讲座,提到了webpack-css-treeshaking-plugin,该插件基于AST对CSS冗余代码进行了很好的处理。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言多项式样条回归、非线性回归数据分析
- R语言中进行Spearman等级相关分析
- R语言相关分析和稳健线性回归分析
- R语言文本挖掘使用tf-idf描述NASA元数据的文字和关键字
- R语言对NASA元数据进行文本挖掘的主题建模分析
- 随机搜索变量选择SSVS估计贝叶斯向量自回归(BVAR)模型
- R语言VAR模型的不同类型的脉冲响应分析
- R语言用向量自回归(VAR)进行经济数据脉冲响应研究分析
- R语言从经济时间序列中用HP滤波器,小波滤波和经验模式分解等提取周期性成分分析
- python中使用scikit-learn和pandas决策树进行iris鸢尾花数据分类建模和交叉验证
- CNN+ Auto-Encoder 实现无监督Sentence Embedding ( 基于Tensorflow)
- R语言数据可视化分析案例:探索BRFSS数据
- R语言探索BRFSS数据可视化
- 基于ThinkPhp6.0+Vue 开发的一套免费开源新零售商城系统
- Kubernetes之RBAC权限管理