记录-antd按需加载配置过程

最新推荐文章于 2024-04-15 20:58:06 发布

他夏了夏天吖

最新推荐文章于 2024-04-15 20:58:06 发布

阅读量349

点赞数

文章标签：前端 reactjs react

本文链接：https://blog.youkuaiyun.com/zh0623/article/details/105089265

版权

本文详细介绍了如何在React项目中使用Ant Design组件库实现按需加载，包括安装模块、修改启动配置、调整webpack配置、引入组件及样式等步骤，帮助开发者减少项目体积，提高加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd按需加载配置过程

1.安装模块

antd按需加载配置过程

1.安装模块

2.修改 package.json 里的启动配置

3.去node_modules/react-app-rewired 里修改config-overrides.js 修改默认配置

4.然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

5.重启 yarn start

6.报错问题集合

6.1 Cannot find module 'react-scripts/package.json'

解决:执行yarn add react-scripts --dev

2.修改 package.json 里的启动配置

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

3.去node_modules/react-app-rewired 里修改config-overrides.js 修改默认配置

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

4.然后移除前面在 `src/App.css` 里全量添加的 `@import '~antd/dist/antd.css';` 样式代码，并且按下面的格式引入模块。

// src/App.js
  import React, { Component } from 'react';
- import Button from 'antd/es/button';
+ import { Button } from 'antd';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

  export default App;