温馨提示: 豌豆仅提供国内节点,不提供境外节点,不能用于任何非法用途,不能访问境外网站及跨境联网。

免费领取1万IP!

demo10 关于JS Tree Shaking

发布时间:

1.什么是 tree shaking

借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析,webpack 能够利用 Tree Shaking 进行按需加载,移除掉没有被引用的模块,从而减少包的大小,缩小应用的加载时间,从而提高性能体验。

2.需配合 UglifyJSPlugin 来实现 tree shaking

UglifyJSPlugin 的作用在于删除未被引用代码以及压缩代码。

从 webpack 4 开始,只需将 "mode" 设置为 "production" 模式,即可开启 UglifyJSPlugin 的功能。

详情可参考官方 Tree Shaking 文档:www.webpackjs.com/guides/tree…

3.目录结构

// `--` 代表目录, `-` 代表文件
  --demo10
    --src
      -app.js
      -module.js
    -webpack.config.js
复制代码

module.js

export const sayHello1 = () => {
  console.log('hello1');
}

export const sayHello2 = () => {
  console.log('hello2');
}

export const sayHello3 = () => {
  console.log('hello3');
}
复制代码

app.js

// 只导入了 sayHello1 ,观察打包后的 bundle 代码,移除了 sayHello2 和 sayHello3 的代码
import { sayHello1 } from './module';

sayHello1();
复制代码

4.编写webpack配置文件

webpack.config.js

const path = require("path");

module.exports = {
  mode: "production" || "development", // tree shaking 需要使用 "production" 模式
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "[name].bundle.js"
  }
};
复制代码

5.执行打包命令

(默认你已经安装了全局 webpack 以及 webpack-cli )

webpack
复制代码

打包成功后,会在 demo08 目录下生成 dist/app.bundle.js

6.验证 tree shaking 是否生效

打开 app.bundle.js 文件,

发现查找不到 Hi I want to say hello2Hi I want to say hello3 ,

说明 Tree Shaking 生效了。

7.源码地址

demo 代码地址: github.com/SimpleCodeC…

仓库代码地址(及目录): github.com/SimpleCodeC…

参考文档:tree shaking

相关文章


《Spark The Definitive Guide》Chapter 4:结构化API预览 Flutter——UI布局 xcodebuild自动打包,发布应用 时间序列预测(一)—— 数据预处理 谈谈你对Promise的理解 [架构基本功]Parcelable序列化 每日一道面试题(第3期)---一般什么情况下会导致内存泄漏问题 使用Gradle插件生成资源ID映射文件

上一篇:使用expect实现自动2步登录
下一篇:JavaScript 发布-订阅模式

咨询·合作