TreeShaking

树摇去除无用代码 1个模块可能有多个方法，只要其中的某个方法被使用到了，则整个文件都会被打到bundle里面去，tree shaking 就是只把用到的方法打入到bundle,没有用到会在uglify阶段擦除掉

使用前提

1. 使用es6module
2. 生产环境

js使用TreeShaking

步骤

1. 开启usedExports
2. TerserPlugin擦除
3. sideEffects 消除副作用

usedExports

负责给未使用的导出打标机

• 开启usedExports
• TerserPlugin 擦除
• sideEffects消除副作用

usedExports在production阶段是默认打开的，和Terser配合使用
usedExports就是在编译后代码中添加一段注释 unused harmony export mull，告诉Terser在优化时删除这段代码

optmization:{
    usedExports:true, // 默认值
}

TerserPlugin擦除

擦除掉usedExports 打标记的导出

• 开启usedExports
• TerserPlugin 擦除
• sideEffects消除副作用 ```typescript

optmization:{ usedExports:true, // 默认值 minimize: true, minimizer: [ new TerserPlugin({ test: /.js(\?.*)?$/i, }), ], }

<a name="DJyRT"></a>
### sideEffects消除副作用
> 消除引入文件的副作用
- [x] 开启usedExports
- [x] TerserPlugin 擦除
- [x] sideEffects消除副作用
packages.json
```typescript
"sideEffects":false

webpack.config.js

module:[
    rules:[
        {
            test:/\.css/,
            .....
            sideEffects:true // 防止css被擦除
        }
    ]
],
optmization:{
    usedExports:true, // 默认值
      minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
}

css的使用TreeShaking

依赖于purgecss-webpack-plugin

const PurgecssWebpackPlugin  =require('purgecss-webpack-plugin ')
const glob = require('glob')
plugins:[
    new PurgecssWebpackPlugin({
        paths:alob.sync(`${ptah.resolve('./src')}/**/*`,{nodir:true }),
        safelist:function(){
            return [
                standard:["body","html"]
            ]
        }
    })
]