webpack — tree shaking 介绍：

tree shaking 的作用：

在我们使用webpack进行打包的时候，我们现在有一个有一个模块A.js;我们在index.js中引入A模块的部分代码；tree shaking会帮我们吧我们不需要的其他代码删除掉；只打包我们已经使用的代码；

1. 一个模块引用了没有被使用；
2. 一个模块中可能有很多方法，但实际使用中可能没有被全部使用到；
3. 代码中Dead code 死代码；

就像这样：

// A.js
export const a = 'a';
export const b = 'b';    // 不导出，删除
export const c = 'c';    // 导出不引用，删除

// index.js 
import { a, c } from './a.js'; 
console.log(a);
if(false) {             // 不会执行的代码，删除
  console.log('去除我');  
}
复制代码

使用：

在mode：production的模式下 tree shaking自动启用；不需要我们手动开启；
必须使用ES6语法，不支持CJS，因为import和require的引入方式是不同的；
因为 tree shaking只能对静态的代码进行分析；import引入属于静态引入，而require属于动态引入；

注意

在我们使用的过程中；我发现tree shaking并不能对我们的一些副作用代码进行优化；
像class中一些方法，和一些副作用函数之类的；
副作用：副作用可以理解成某个模块执行时除了导出成员之外所作的事情；详细就不累述了；

tree shaking优化：sideEffects：true/false/数组

前提：webpack 的版本号要大于等于 4

解释：

false ：告诉 webpack 我这个 npm 包里的所有文件代码都是没有副作用的；
数组：数组则表示告诉 webpack 我这个 npm 包里指定文件代码是没有副作用的

使用

// package.json
{
    "sideEffects": false
}
// antd package.json
{
  "sideEffects": [
    "dist/*",
    "es/**/style/*",
    "lib/**/style/*"
  ]
}
复制代码

我们还可以对webpack 的配置文件中配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
        sideEffects: false || []
      }
    ]
  },
}
复制代码

这样就会对我们的整个项目生效了；我们就可以愉快的吧我们的不需要的副作用代码优化掉！