问答

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

作者:admin 2021-06-14 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

###

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

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • react+antd的写的组件打包后太大怎么办

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

  • 编译安装keepalived时,make报错对‘OP

    编译安装keepalived时,make报错对‘OP

  • QueryList v4 如何获取html标签自定义

    QueryList v4 如何获取html标签自定义

  • nodejs可是实现多线程异步吗?

    nodejs可是实现多线程异步吗?

腾讯云代理商
海外云服务器