react.js - 使用antd开发react单页面应用，项目部署时进行代码拆分，将antd包单独打包，大小1.2M，还可以有更优化的方案么？

问题描述

问 题

webpack配置

entry:{
    "index": path.resolve(__dirname, './index.jsx'),
    "common": ['react','react-dom','react-router','jquery'],
    "buile" :['summernote','react-summernote'],
    "antdlib":['antd']
},

将项目中的antd单独打包，然而大小有1.2m实在接受不了这个大小，请问还有其他的方案么？
我试过

// 公共模块抽离
  externals: {
      "echarts": 'echarts',
    // "antd":'antd'
    },

这样抽离出来，然后在页面引入antd的CDN，可是会报错，比较下代码，多一些wabpack的配置，不知道该怎么解决。

项目文件中我也是按需加载的
类似这样的
import { Row, Col, } from 'antd';
可是打包之后还是都打包出来了

解决方案

好像是antd不推荐使用直接引用的方式来引入antd.js了，这里

然后这边提供了两种按需加载的方法。

使用babel-plugin-import或者import Button from 'antd/lib/button';

官方的文档中也有写的。

希望这两种办法可以满足你的需要。

这篇关于react.js - 使用antd开发react单页面应用，项目部署时进行代码拆分，将antd包单独打包，大小1.2M，还可以有更优化的方案么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！