关联知识：

  • 模块化
  • import和require的区别

说下 tree-shaking 的原理

https://mp.weixin.qq.com/s/uYd72aUb9wvUcjICFLREgg

什么是tree-shaking？

一个性能优化的范畴。
实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。
支持tree-shaking的构建工具

  • rollup
  • webpack2
  • closure compiler

理想状态Dead Code •代码不会被执行，不可到达 •代码执行的结果不会被用到 •代码只会影响死变量（只写不读）

原理是依赖于ES6的模块特性

ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。

ES6 module 特点：

  • 只能作为模块顶层的语句出现
  • import 的模块名只能是字符串常量
  • import binding 是 immutable的

为什么可以消除无用函数， 缺不能消除无用类？

  • 函数的副作用相对较少，顶层函数相对来说更容易分析，加上babel默认都是”use strict”严格模式，减少顶层函数的动态访问的方式，也更容易分析
  • javascript动态语言的特性使得静态分析（类是否引用）比较困难

实践

https://juejin.cn/post/6844903544760336398

1. 缩小组件引用

webpack插件

  • purifycss-webpack
  • mini-css-extract-plugin

3. 去重

CommonsChunkPlugin