1、tree shaking概念

概念：1个模块可能有多个方法，只要其中的某个方法用到了，则整个文件都会被打包到budle里面去，tree shaking 就是把只用到的方法打入到budle文件中，没有用到的方法则会在uglify阶段被擦除掉

使用：webpack默认支持，在babelrc里设置modules:false即可，production mode的情况下默认开启

要求： 必须是es6语法，CJS方式不支持

2、原理

1、消除方法：DCE（dead code elimination）

DCE的特征

代码不会被执行，不可到达(eg:if(false){console.log('ye')}）
代码执行的结果不会被用到 (定了方法始终没有使用)
代码只会影响死变量（只写不读）

原理

列用es6模块的特点

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

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

ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化

3、如何删除无用的CSS

默认是删除无用的JS，那无用的CSS如何删除呢？

有两种方式：

1、purifyCss:遍历代码，识别到已经用到的css class 2、uncss:html需要通过jsdom 记载，所有的样式都通过postcss解析，通过document.queryselector来识别在html文件中不存在的选择器

应用：

使用purgess-webpack-plugin ，需要和mini-css-extract-pluginp配合使用

    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
    }),
  ]

webpack学习之-tree shaking

1、tree shaking概念

2、原理

3、如何删除无用的CSS