阐述 tree-shaking

总结：「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

是什么

移除 JavaScript 上下文中的未引用代码，Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。

• ESM: export + import
• Common JS: module.exports + require

怎么做

1. 开发环境下的配置

// webpack.config.js
module.export = {
    ...
    mode: 'development',
    optimization: {
        usedExports: true
    }
}

2. 生产环境下的配置

// webpack.config.js
module.exports = {
  // ...
  mode: 'production'
  // ...
}

在生产环境下， Webpack 默认会添加 Tree Shaking 的配置，因此只需要写一行 mode: 'production' 即可。

3. package.json

在 package.json 中添加字段: sideEffects: false 告诉 webpack 那些代码可以处理。