react中使用antd按需加载(第一部)

什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需加载就要对webpack文件进行修改,需要我们执行npm run eject命令来展开项目的隐藏文件,如果只是简单的修改,我们可以使用react-app-rewired定义全局变量,react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置。具体如下:

使用 react-app-rewired 对 create-react-app 的默认配置进行自定义

1.yarn add react-app-rewired –dev

1
2
3
4
5
6
7
8
9
/* 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 --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}

react中自定义antd主题与支持less(第二部)

自定义主题

首先自定义主题需要修改antd,antd本身也是less写的之后编译成css的,所以当我们需要使用less。

1.yarn add react-app-rewire-less –dev

1
2
3
4
5
6
7
8
9
10
11
const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
- config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+ config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
+ config = rewireLess.withLoaderOptions({
+ modifyVars: { "@primary-color": "#1DA57A" },
+ })(config, env);
return config;
};

react中antd+css Module一起使用

antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。

使用 exclude 和 include 配置参考https://segmentfault.com/q/1010000011223900,修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用less-loader 来处理css文件,在与antd一起使用时可能出现错误,单独写一条规则),所以我们只能两个来处理css的loader。

react中create-react-app配置antd按需加载(方法二)

1.yarn add babel-plugin-import

2.在根目录下的package.json下的bable中添加相应代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
// 引入样式为 css
// style为true 则默认引入less
}
]
]
}

3.重启项目yarn run start

react中关于create-react-app2里css相关配置

先看 webpack.config.dev.js 里的相关代码:

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×