深入研究webpack之Tree Shaking

Tree Shaking我原来也只是了解，这次碰巧深入研究了下，就写个博客记录一下，网上有很多讲Tree Shaking的，我写的这篇跟他们侧重点不一样

Tree Shaking相关的基础知识

1 webpack会从入口文件开始不断的获取你的依赖，就像一颗树一样从根节点开始不断往下延伸，只有被依赖的文件才会加入树，注意这不叫Tree Shaking，Tree Shaking是指依赖的文件只需要的一部分，则把不需要的部分代码摇掉
2 Tree Shaking只能识别es6语法，这点很关键，但是webpack不支持es6打包，也就是说你用import写的代码可以被Tree Shaking，但是你npm别人的库，如果别人不是es写法，那么无法Tree Shaking。比如lodash和lodash-es，后者是es的导入写法，代码量就可以被压缩。
3 Tree Shaking原来是用uglifyjs来做压缩的，现在由于现在不维护uglify-es了（uglify-es is no longer maintained ），现在改用terser了，据说是uglify的一个分支。（对我们使用来说其实没什么感觉，只是了解一下）
4 什么是副作用，之前看别人的文章看到懵懵的，后面终于理解了，其实很简单
index.js 如下，就是导入了util.js

import './vendor/util'  // 

vendor/util.js 如下，里面有做全局的修改或者console.log什么东西

// vendor/util.js
export function a() {
  return 'this is function "a"';
}

export function b() {
  return 'this is function "b"';
}

export function c() {
  return 'this is function "c"';
}
window.a = 43

      有时候我们写代码用这种写法，由于里面没有导入东西进来，webpack准确说是terser就不知道你到底要不要这个东西，万一里面有修改全局你把它丢了肯定不行，如果不丢那你就要去读一遍文件才知道到底有没有副作用，官方文档说是非常耗时且因为js是动态语言所以是非常不可靠的操作，我这里仅仅是写的非常简单，工作中可能业务变得更加复杂。

标签：function,Tree,js,webpack,Shaking,es
来源： https://www.cnblogs.com/wzcsqaws/p/11571945.html