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 文档：

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 hello2 和 Hi I want to say hello3 ,

说明 Tree Shaking 生效了。

7.源码地址

demo 代码地址:

仓库代码地址(及目录):

参考文档：