webapck摇树优化(tree shaking)

概念

摇树是一种消除死代码的方法，应用程序的依赖项是树状结构，树的每个节点都代表了一个依赖项，这些依赖项为应用程序提供了不同的功能，通过消除不需要的依赖项来减少树的节点，这个过程叫摇树。只能适用于es6模块的导入，不适用于commonJS的require，因为es6的模块是静态引入。

1. 应用程序采用按需加载的方式导出，没有被引用的模块不会被打包进来，减少包大小，缩小应用的加载时间。

2. es6的模块是静态分析

3. webpack自带tree shaking，只需要加些配置

webpack.config.js

optimization: {
    // 使用tree-shaking
    usedExports: true, // mode为production时，默认开启
  },

print.js：导出了两个函数

export const add = (a, b) => {
  console.log(a + b);
}

export const minus = (a, b) => {
  console.log(a - b);
}

index.js：只引用了其中一个函数

import { add } from "./print";

add(1, 2);

tree-shaking结果

mode:development,依然将未引入的函数打包了，只是有一句注释标记未被引用，这样做是为了在开发模式下调试方便，如果把代码删除，程序报错时，位置定位不准。

Xnip2020-09-22_17-41-42.jpg

mode:production,打包后的代码被压缩，且未被引入的函数没有打包