usedExports

usedExports 属性用来标记一些没有用到的函数或属性。

optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
    ]
  },

在开发环境下打包时可以看到，usedExports 设置 true 后，webpack 在打包结果中添加了一些魔法注释。

之后通过 minimize 和 TerserPlugin 把没有用到的函数和属性去掉。

sideEffects

在一个模块中，如果写了一些非导出的全局性代码，比如挂载原型方法或全局属性，那么这些方法或属性就是代码的副作用。一些情况下，副作用代码需要在打包时删除，然而像导入css文件之类的副作用代码需要保留，配置sideEffects 属性可以实现筛选。
在 package.json 下配置一个 “sideEffects” 属性，来实现这种方式。如果整个项目没有副作用或不需要保留副作用，设置为 fasle，如果确实有一些副作用，可以配置成一个数组。数组里的文件会保留副作用。

"sideEffects": [
    "./src/title.js",
      "css/**",
  "*.css"
  ],

css 文件一般不放在数组里，而是在配置文件的 rules 里配置。

{
  test: /\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          esModule: false
        }
      },
      'postcss-loader'
    ],
      sideEffects: true,
},