Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
557 views
Welcome To Ask or Share your Answers For Others

1 Answer

打包时开启了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
          }),
        ]
      },
   ...
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...