antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。当我们使用它做为我们项目的UI库，一定会遇到按需加载的问题，在Ant Design 的官网上，给出了两种方式来解决按需加载的问题：
- 通过手动方式引入：
import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style'; // 加载 LESS
- 使用 babel-plugin-import
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [email protected] 版本的关系，你还需要安装 customize-cra。
$ yarn add react-app-rewired customize-cra
/* 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 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
$ yarn add babel-plugin-import
+ 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';
- 修改react-scripts中webpack配置
假设你不想使用官方给出的两种方式来实现antd按需加载，恰巧你的项目又是基于create-react-app建立，那么还有第三种方式来修改，就是修改/node_modules/react-scripts/config/webpack.config.js文件来实现：
// 在babel-loader的配置中加上['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
.....
plugins: [
+ ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
],
......
}
注意：因为是直接修改node_modules里 的文件，所以如果你的项目过滤掉node_modules的话，如果重新拉取项目或者在线上构建的时候。不要忘记在react-scripts中的修改！