关于antd按需加载如何使用_antd 4.0 按需加载-程序员宅基地

技术标签： antd react

1.安装 react-app-rewired customize-cra

 yarn add react-app-rewired customize-cra

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.下载按需加载的插件babel-plugin-import

yarn add babel-plugin-import

4.在与src同级目录下新建文件config-overrides.js

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

在这里插入图片描述
5.重启项目 npm start

tips:如果项目没跑起来，报错scripts不是什么什么命令之类的。删掉依赖，重新安装。或者单独安装scriptes插件 yarn add scripts

本文链接：https://blog.csdn.net/Benz_s600/article/details/105813202

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ZwQuerySystemInformation 用来枚举内核模块-程序员宅基地

文章浏览阅读1.4k次。ZwQuerySystemInformation 用来枚举内核模块

cocos2d-x中A星算法的实现和实际使用_cocos2d astar-程序员宅基地

文章浏览阅读1.4k次。A星算法经常会用在寻径算法中，是一种典型的启发式搜索算法，属于人工智能算法的一种，_cocos2d astar

java内存区域知识点图解_java内存知识点-程序员宅基地

文章浏览阅读315次。Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域，这些区域都有各自的用途，以及创建和销毁的时间。有的区域随着虚拟机进程的启动而存在，有些区域则依赖用户线程的启动和结束而建立和销毁。_java内存知识点

【SpringBoot刷题】SpringBoot练习题（六）--Spring Boot缓存管理_springboot题库-程序员宅基地

文章浏览阅读240次。springboot常用知识刷题缓存管理_springboot题库

python快速编程入门课后程序题答案-《Python编程：从入门到实践》课后习题及答案...-程序员宅基地

文章浏览阅读554次。第11章测试代码11-1 城市和国家：编写一个函数，它接受两个形参：一个城市名和一个国家名。这个函数返回一个格式为City, Country 的字符串，如Santiago, Chile 。将这个函数存储在一个名为city_functions.py的模块中。创建一个名为test_cities.py的程序，对刚编写的函数进行测试（别忘了，你需要导入模块unittest以及要测试的函数）。编写一个..._python程序编写入门课后答案苏东

已解决ModuleNotFoundError: No module named ‘pip‘-程序员宅基地

文章浏览阅读6.1w次。出现"ModuleNotFoundError: No module named ‘pip’"错误通常表示您的Python环境中缺少pip模块。