react+antd的写的组件打包后太大怎么办？

Question

写的一个react弹框登陆注册组件，使用了antd的modal,form等等一些组件，准备发布到npm去，但是使用webpack打包完有200k左右。。

已经使用webpack的externals排除了打包react、react-dom和antd，求解还有什么方法能使打包体积变小吗，目标打包完体积在50k左右最好，谢谢大家了！

Answer 1

打包时开启了sourcemap没有？就是webpack配置里的devtools字段。另外，可以使用
terser-webpack-plugin 和 optimize-css-assets-webpack-plugin 分别对js 和 css进行压缩。配置项举例如下：

module.exports = {
   ...
    optimization: {
        usedExports: true,
        minimizer: [
          new OptimizeCssAssetsPlugin({}),
          new TerserPlugin({
            cache: true,
            parallel: true,
            sourceMap: false,
            terserOptions: {
              output: {
                comments: false,
              },
            },
            extractComments: false
          }),
        ]
      },
   ...
}

Answer 2

装上 webpack-analyzer-plugin，好好看看有哪些模块并不需要但实际打包进去了。