第199题(2020-04-23)：webpack Tree-shaking 原理是什么？

[qappleh]

No description provided.

[qappleh]

原理简述

实际上共做了2件事

1. 去除未引用ES模块变量

如果一个.js文件，导出(export)的变量并未被使用，则删除他们。

示例
模块a.js中导出了2个变量square cube

//a.js
const square = (x) => {
  console.log(1111111)
  return x * x;
}

const cube = (aaa) => {
  console.log(2222222)
  return aaa * aaa * aaa;
}

export {square, cube}

但在index.js中引入此模块时只用到了第一个变量

//index.js
import {square} from './a.js';

console.log(square);

打包后，a.js中的第二个变量会被删除

原理

• webpack会在打包时识别未使用的导出的变量（函数 类 对象等），将其标记为unused harmony export xx
  -需要开启 optimization.usedExports

• 压缩插件（TerserPlugin）对标记部分进行删除
  需要开启 optimization.minimize

注意：

如果有副作用文件需要使用package.json中的sideEffects配置，这需要开启 optimization.sideEffects
未导出但内部使用了的变量不会被删除
即使导出的变量被其他模块导入了，但未使用，依然会被删除
bable(7)转义并不会产生影响

2. 去除 dead code

dead code 指不执行或只定义不使用的代码

原理
压缩插件（TerserPlugin）通过遍历作用域识别这些dead code，并进行删除

示例
打包后下面的1-4都会被删除

onst square = (x) => {

  // 1 不执行
  if (false) {
    console.log(1111)
  }
  // 2 只定义不使用
  function a() {
    console.log(6666)
  }
  // 3 只定义不使用
  var b = 2222;
  return x * x;
  // 4 不执行
  const c = 3333;
}

答疑

tree-shaking 到底有啥用？
（1）针对模块缩减代码：导出的变量没被使用，那么删除这个变量
（2）针对代码块缩减代码：删除不执行或只定义不使用的代码

我的ui库是不是可以通过tree-shaking大幅度缩减代码？
并不会。
因为大多数库只是导出一个变量，当然有的支持按需引入是可以的，比如element-ui

参考

tree-shaking
你的Tree-Shaking并没什么卵用

原文链接：https://www.jianshu.com/p/03380ebffda4