webpack4 系列教程(八): JS Tree Shaking

发布 : 2018-09-01 分类 : webpack4系列教程 浏览 :

0. 课程介绍和资料

>>> 本节课源码

>>> 所有课程源码

本次课程的代码目录(如下图所示):

1. 什么是Tree Shaking

字面意思是摇树,一句话:项目中没有使用的代码会在打包时候丢掉。JS 的 Tree Shaking 依赖的是 ES2015 的模块系统(比如:importexport

本文介绍Js Tree Shakingwebpack v4中的激活方法。

2. 不再需要UglifyjsWebpackPlugin

是的,在webpack v4中,不再需要配置UglifyjsWebpackPlugin。(详情请见:文档) 取而代之的是,更加方便的配置方法。

只需要配置mode"production",即可显式激活 UglifyjsWebpackPlugin 插件。

注意:根据版本不同,更新的webpack v4.x不配置mode也会自动激活插件

我们的webpack.config.js配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require("path");

module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js"
},
mode: "production"
};

我们在util.js文件中输入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
// util.js
export function a() {
return 'this is function "a"';
}

export function b() {
return 'this is function "b"';
}

export function c() {
return 'this is function "c"';
}

然后在app.js中引用util.jsfunction a()函数:

1
2
3
// app.js
import { a } from "./vendor/util";
console.log(a());

命令行运行webpack打包后,打开打包后生成的/dist/app.bundle.js文件。然后,查找我们a()函数输出的字符串,如下图所示:

如果将查找内容换成 this is function "c" 或者 this is function "b", 并没有相关查找结果。说明Js Tree Shaking成功

3. 如何处理第三方JS库?

对于经常使用的第三方库(例如 jQuery、lodash 等等),如何实现Tree Shaking?下面以 lodash.js 为例,进行介绍。

3.1 尝试 Tree Shaking

安装 lodash.js : npm install lodash --save

在 app.js 中引用 lodash.js 的一个函数:

1
2
3
// app.js
import { chunk } from "lodash";
console.log(chunk([1, 2, 3], 2));

命令行打包。如下图所示,打包后大小是 70kb。显然,只引用了一个函数,不应该这么大。并没有进行Tree Shaking

3.2 第三方库的模块系统 版本

本文开头讲过,js tree shaking 利用的是 es 的模块系统。而 lodash.js 没有使用 CommonJS 或者 ES6 的写法。所以,安装库对应的模块系统即可

安装 lodash.js 的 es 写法的版本:npm install lodash-es --save

小小修改一下app.js:

1
2
3
// app.js
import { chunk } from "lodash-es";
console.log(chunk([1, 2, 3], 2));

再次打包,打包结果只有 3.5KB(如下图所示)。显然,tree shaking成功。

友情提示:在一些对加载速度敏感的项目中使用第三方库,请注意库的写法是否符合 es 模板系统规范,以方便webpack进行tree shaking

_终_

本文作者 : 董沅鑫
原文链接 : https://godbmw.com/passages/2018-09-01-js-tree-shaking/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

知识 & 情怀 | 二者兼得

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

留下足迹