这一节的代码位于 09_optimisation/9_5_tree-shaking_scope-hosting

tree-shaking

  • 在使用es6的import export语法管理模块时, webpack会自动优化没有使用的代码, 这个功能称为tree-shaking
  • 文档 https://webpack.js.org/guides/tree-shaking/#root
  • 写两个js文件, 其中一个js引用另一个js代码:
  • image.png
  • 此时只使用了common.js中的sum方法, 在生产模式打包代码:
  • image.png
  • 此时只打包了sum方法, minus方法并没有导入, 这就是webpack的tree-shaking功能
  • 并且只有在es6模块的写法生效, 如果使用require的方式引入会失效:
  • image.png
  • 打包结果: image.png
  • image.png

scope hosting 作用域提升

在webpack中会自动简化的代码

  • 如果写了一些可以简化的代码, 如下:
  • image.png
  • 运行打包后的结果为:
  • image.png
  • 省略了声明a, b, c的过程
  • image.png