【react / antd】antd的使用，以及js和css样式的按需加载配置

---

版本介绍

在react中使用antd，相关版本如下：

"react": "^18.2.0",
"antd": "^4.23.5",
"babel-plugin-import": "^1.13.5",
"css-loader": "^6.5.1",
"webpack": "^5.64.4",

如果版本不一致，相关配置可能失效或者报错。

---

使用antd

这部分可以直接按照antd官方文档的步骤完成

https://ant.design/docs/react/use-with-create-react-app-cn

---

指令和相关配置列举如下：

npm i antd

在/src/index.js中引入antd的全局样式：

import 'antd/dist/antd.less';

继续安装插件：

npm i @craco/craco

npm i craco-less

在根目录下创建craco.config.js文件，该文件是对react做一些自定义配置，

还可以自定义antd样式主题。

当前配置如下：

/**
 * craco的作用是 在不用eject暴露react配置的情况下，对react进行各种配置。
 * 用于替代eject的暴露文件，作用和eject暴露的配置文件相同。
 * 使用了craco后，即使使用了eject暴露文件进行配置，也是无效的
 * 因为craco的配置，会覆盖react原有配置，也会覆盖eject中的配置。
 */
const CracoLessPlugin = require('craco-less');

process.env.PORT = 3001; // 设置启动时的端口为3001
process.env.BROWSER = "none"; // npm start时禁止自动启动浏览器
process.env.GENERATE_SOURCEMAP = false; // npm run build打包时，不再生成mapsource文件

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1890ff' }, // 全局默认颜色
            javascriptEnabled: true,
          },
        },
      },
    },
  ]

修改package.json文件：

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

此时，引入antd的组件，就可以用了。

// App.js
import React from 'react';
import { Button } from 'antd';

const App = () => {
  return <>
    <Button type="primary">Button</Button>
  </>
}

export default App;

---

按需加载

按需加载分为js的按需加载和css样式的按需引入。

js按需加载

js这块，默认就是按需加载的，不需要特殊处理，官方文档有明确说明。

想用哪个组件，直接import引入使用即可。

---

css按需引入

以上操作，需要在/src/index.js中引入antd的less样式，才会让组件样式生效。

import 'antd/dist/antd.less';

但是，这样引入的是antd的全部样式，不管你需不需要，所有样式都会被引入。

这样会导致加载变慢，打包时也会产生不必要的css代码。

所以，就需要按需引入样式。

此处有至少5种方法，这里我列举出一种最常用、最简单的配置。

安装：

npm i babel-plugin-import

修改craco.config.js配置为：

/**
 * craco的作用是 在不用eject暴露react配置的情况下，对react进行各种配置。
 * 用于替代eject的暴露文件，作用和eject暴露的配置文件相同。
 * 使用了craco后，即使使用了eject暴露文件进行配置，也是无效的
 * 因为craco的配置，会覆盖react原有配置，也会覆盖eject中的配置。
 */
const CracoLessPlugin = require('craco-less');

process.env.PORT = 3001; // 设置启动时的端口为3001
process.env.BROWSER = "none"; // npm start时禁止自动启动浏览器
process.env.GENERATE_SOURCEMAP = false; // npm run build打包时，不再生成mapsource文件

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1890ff' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  babel: {
    plugins: [
      [
        "import",
        {
          "libraryName": "antd", // 表示要做antd的按需引入
          "libraryDirectory": "es",// antd用es的模块化规范
          "style": true //设置为true即是less
        }
      ]
    ]
  }
};

此时就不需要引入antd样式了，把引入的样式注释或者删除即可：

重新启动npm start。不出意外，就可以正常使用了。