专栏首页YuanXin八:JS Tree Shaking

八:JS Tree Shaking

本文简述了webpack3webpack4在 JS Tree Shaking 上的区别,并详细介绍了在 webpack4 环境下如何对 JS 代码 和 第三方库 进行 Tree Shaking。

Now, 一起来踩坑吧 ♪(^∇^*)

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配置如下:

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文件中输入以下内容:

// 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()函数:

// 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 的一个函数:

// 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:

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三:多页面解决方案--提取公共代码

    按照惯例,我们在src/文件夹下创建pageA.js和pageB.js分别作为两个入口文件。同时,这两个入口文件同时引用subPageA.js和subPageB...

    心谭博客
  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 九:CSS-Tree-Shaking

    是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。

    心谭博客
  • node.js的模块化及reqire与exports释义

    模块化是node.js的核心概念,node.js对于服务端的操作都是封装成一个个独立的核心模块,以文件读写模块File System为例:

    章鱼喵
  • 学前端这个事儿,你是怎么个打算呢?

    这是我和一个同学的聊天截图,聊天内容很有代表性,就是知道要学习,知道要努力,但是,然后会怎么样?并不是很清楚。图中的这个哥们已经毕业有一些年头了,但他在面对跨行...

    web前端教室
  • PHP 配合JSmin库进行压缩前端JS代码进行合并访问,减少前端访问请求。

    Eller
  • 快速学习ReactJS-搭建环境

    在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。

    cwl_java
  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • UI5 Source code map机制的细节介绍

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • js实现关于数据字典的使用和数据存放的策略

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚

扫码关注云+社区

领取腾讯云代金券