react-app中的antd按需引入

最新推荐文章于 2022-07-18 21:44:10 发布

HEIWMM

最新推荐文章于 2022-07-18 21:44:10 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： react antd

本文链接：https://blog.csdn.net/HEIWMM/article/details/100830927

antd 同时被 2 个专栏收录

1 篇文章

订阅专栏

react

0 篇文章

订阅专栏

本文详细介绍了在React项目中如何使用react-app-rewired和customize-cra插件，结合babel-plugin-import实现Ant Design组件的按需加载，减少项目体积，提高加载速度。同时，针对项目eject后的配置调整进行了说明。

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

最近在做react的项目，引用antd时想要按需引入在网上找了很多没有一个比较完美的解决方法，都是一知半解，也可能是库更新了，打算自己做个总结

1.按照官方给的方法

先安装react-app-rewired和 customize-cra

npm install react-app-rewired customize-cra

修改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",
}

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

module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};

使用 babel-plugin-import

npm install babel-plugin-import

并修改 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',
+   }),
+ );

即可按需引入

import { Button } from 'antd'

2. npm run eject后对于原项目antd按需引入的影响

在项目eject之后同城需要修改packjson的scripts此时react-app-rewired已经不管用了，再用官方给的方法就不会在起作用了，这样config-overrides.js就没有必须要去使用的意义
我们只需要去修改babel的设置即可，不需要再去写一个**.babelrc**文件，这样会产生冲突

因为run eject以后在packjson里面有babel

"babel": {
"presets": [
  "react-app"
],
"plugins": [
  [
      "import",
      { "libraryName": "antd-mobile", "style": "css"
      }
  ] 
]
}