react使用antd在实际开发中还有一些优化的空间,比如无法进行主题配置、加载了全部的 antd 组件的样式(gzipped 后一共大约 60kb)。
此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (4.x:craco)(一个对 create-react-app 进行自定义配置的社区解决方案)。
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra。
1.安装:
yarn add react-app-rewired customize-cra //3.x
yarn add @craco/craco //4.x
2.更改配置:(可以暴露react项目的配置文件,但没办法返回,暴露方法是yarn eject可以暴露配置,这样直接改暴露出来的配置文件很容易出错,不建议)
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start", //"craco start"
- "build": "react-scripts build",
+ "build": "react-app-rewired build", //"craco build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test", //"craco test",
}
然后在项目根目录创建一个 config-overrides.js(4.x: craco.config.js) 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
}
但是这么做相当于没做任何事情,拿到配置但为做任何修改
3.自定义主题
4.x版本:
然后安装 craco-less 并修改 craco.config.js 文件如下。
yarn add craco-less
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
3.x版本:
按照 配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式,同时修改 config-overrides.js 文件如下。
安装
yarn add less less-loader
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ lessOptions:{
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }
+ }),
);
这里利用了 less-loader 的 modifyVars 来进行主题配置,变量和其他配置方式可以参考 配置主题 文档。
那么需要借助:
4.babel-plugin-import#
注意:antd 默认支持基于 ES module 的 tree shaking,js 代码部分不使用这个插件也会有按需加载的效果。
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js (4.x:craco.config.js)文件。
安装插件:
yarn add babel-plugin-import
//3.x 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',
+ }),
+ );
//4.x craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': 'orange' },
javascriptEnabled: true,
},
},
},
},
],
/*babel 这里是新增的 */
babel: {
plugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
['@babel/plugin-proposal-decorators', { legacy: true }]
]
}
/*新增结束*/
};
5.然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 样式代码,并且按下面的格式引入模块。
就无需导入所有样式
// src/App.js
import React, { Component } from 'react';
- import Button from 'antd/es/button';
+ import { Button } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
6.最后重启 yarn start 访问页面(更改配置文件需要重启项目),antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里