阿里的react组件库
Antd，默认情况下：组件的js是支持按需引入，但css并不支持按需引入，即默认情况下Antd的CSS样式被整体引入，但开发中为了减少打包的体积，我们通常需要自己设置来让css也支持按需引入
方案一：手动引入要使用的组件css样式，例如引入Antd组件库的input组件
// 引入 Input 组件
import 'antd/es/input/style/css'; // 手动按需引入input样式
import { Input } from 'antd'; // 引入 Input 模块（注意这里是自动按需引入的，不会将整个antd.js文件引入）
- 如上所述，每使用一个组件，就需要引入该组件需要的js和css,实在有些麻烦，那有没有什么办法，让引入模块后，自动按需引入对应的css样式呢
方案二：使用bable-plugin-import插件，实现自动引入要使用的组件的css样式
-
使用
webpack里配置babel-plugin-import，便可实现在webpack打包时，自动引入打包模块按需引入，并且将相关联的css样式也按需引入，但因为官方react脚手架默认隐藏了webpack配置，所以我们需要react-app-rewired和customize-cra来开启react的webpakc配置- NPM安装插件
# 安装插件 react-app-rewired customize-cra babel-plugin-import 这3个插件 npm install react-app-rewired customize-cra babel-plugin-import -D- 在项目根目录下，新建文件
config-overrides.js，并设配置其内容
// 项目根目录下，新增文件 config-overrides.js const { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), );- 修改根目录下
package.json文件
// 找到 "scripts" 属性，并修改其属性值（将原来的 react-scripts 改为 react-app-rewired ） "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },- 至此，react中支持了
antd组件库的自动按需引入，如下
// 引入 Input 组件 import { Input } from 'antd'; // 直接引入模块即可（样式和模块，都会自动按需引入）- 当然自动按需引入还有其他方案，比如也使用
npm run eject直接反编译react，让其webpack配置暴露出来
