React-reacte-app项目实现antD按需加载（2023）

出现的问题：

项目打包后，由于引入了antD，所以打包后的mani.js体积会非常大。相当于引入了全部的antD的代码。所以可以做一个优化：通过script标签引入antD，将其挂载在window上。使用antD组件的使用，直接从window上拿。

在使用react-create-app创建出的react项目里。是没有webpack.config.js文件的。只有在创建项目的过程中可以配置。如果想实现AntD的按需加载，那么简单的方式是依靠webpack的能力去实现。

打开webpack.config.js(config-overrides.js)

基于上面的问题，为了配置webpack我们可以使用一个方法。

（1）首先安装react-app-rewired

npm install react-app-rewired

（2）修改package.json文件的启动命令和打包命令

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

（3）在项目根目录下新建config-overrides.js文件。

module.exports = function(config){
  return config
}

这里面的config就是webpack的config配置。如果想要修改webpack的配置，就可以在这里对config进行操作。

通过CDN引入AntD

然后就要通过script标签引入antD组件了。这里有一个问题就是，官网上说了这么一段话：

注意：antd.js 和 antd.min.js 依赖 react、react-dom、dayjs，请确保提前引入这些文件。

也就是说直接通过script标签引入antD一定会，报出xxx is undefined的错误。为了解决这个问题，我们要在引入antD的时候，将react , react-dom ，dayjs都引入。

这里要注意的是，在引入资源的时候版本怎么确定？我如果随意引用版本，比如用了低版本的antD但是用了高版本的dayjs，那么是一定有问题的。
所以，要知道antD中引入了什么版本的dayjs，再去通过cdn引入对应版本的资源。
查看dayjsde版本依赖关系的指令可以通过

npm ls dayjs

这样就可以看到antd中dayjs需要的版本了。
在index.html中，通过script标签进行引入：

    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.4.6/antd.min.js" integrity="sha512-lp26u40m4VHdnHJPrOwtPvqSRdL5VIaNlsZgROrkrCjHhvhM/NprSzol81FjgK3be0CxGv2cH0jLq7jedxS9Mg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

webpack配置

如果已近完成了上面的配置。那么你的项目应该还是个空白页。还会报错，但是控制台已经有了antd和react，reactDom的全局变量了。但还是没有解决问题，因为webpack在打包的过程中，是通过查找node_modules包里面的资源。\

但是我们希望的是通过在全局变量里面找到对应的资源，所以我们要在上面的config-overrides.js里配置externals。

module.exports = function(config){
  config.externals = {
    'react':'React',
    'react-dom':'ReactDOM',
    'antd': 'antd'
  }
  return config
}

这样webpack在start 或者 build 的时候，碰到react ，react-dom， antd就不会再从node_modules里去找了。直接略过。
以上就是webpack打包react-create-app中，如果实现antD按需加载的内容了。