antd按需加载

朴灿烈づ我的快乐病毒、 2023-01-18 06:47 227阅读 0赞

## 非按需加载 ##

**App.js**

import {  Button } from 'antd';

**index.css或者App.css**

@import '~antd/dist/antd.css';

chunk.js大小  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0X2JldHRlcg_size_16_color_FFFFFF_t_70]

## 按需加载 ##

去掉 App.css 中的 `@import ‘~antd/dist/antd.css’;`

安装依赖

yarn add babel-plugin-import react-app-rewired customize-cra

在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。

const {  override, fixBabelImports } = require('customize-cra');
    
    module.exports = override(
        fixBabelImports('import', { 
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
       }),
    );

`package.json`文件中的 `react-scripts` 全部替换为 `react-app-rewired`

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

chunk.js大小  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0X2JldHRlcg_size_16_color_FFFFFF_t_70 1]

参考：  
[https://ant.design/docs/react/getting-started][https_ant.design_docs_react_getting-started]  
[https://blog.csdn.net/My\_Java\_Life/article/details/108539008][https_blog.csdn.net_My_Java_Life_article_details_108539008]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0X2JldHRlcg_size_16_color_FFFFFF_t_70]: /images/20221021/b0e168d16faf46899d3f960b04b6d8bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0X2JldHRlcg_size_16_color_FFFFFF_t_70 1]: /images/20221021/554f614dc6b64e579f82fa2fde1b8348.png
[https_ant.design_docs_react_getting-started]: https://ant.design/docs/react/getting-started
[https_blog.csdn.net_My_Java_Life_article_details_108539008]: https://blog.csdn.net/My_Java_Life/article/details/108539008