tree shaking摇树优化

• 现象：1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打包到bundlle里面去。
• 解决：tree shaking就是只把用到的方法打入bundle，没用到的方法会在 uglify 阶段被擦除掉
  • 开启tree shaking的要求：必须使用ES6的语法，不支持CJS的语法
  • 使用
    • mode: production的情况下默认开启

• DCE（dead code elimination）
  • 代码不会被执行，不可到达
  • 代码执行结果不会被用到
  • 代码只会影响死变量（只读不写）

原理

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

• 代码擦除：uglify 阶段删除无用代码

  scopeHoisting

• 为什么使用scopeHoisting

  • 现象：构建后的代码存在大量的闭包代码
    • 大量函数闭包包裹代码，导致体积增大，模块越多越明显
    • 运行代码时，创建的函数作用域变多，内存开销变大

• 如何使用

  • webpack4以后，mode: production默认开启
  • 要求：是ES6语法，CJS不支持
  • 如果是webpack3，则在plugins中加new webpack.optimize.ModuleConcatenationPlugin()

    原理

• 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突