📝 update documentation about css bundle size

This commit is contained in:
afc163 2019-07-30 13:52:08 +08:00
parent cde4b152d6
commit facc7124da
4 changed files with 6 additions and 6 deletions

View File

@ -69,9 +69,9 @@ module.exports = {
Note that do not exclude antd package in node_modules when using less-loader.
### Customize in roadhog or Umi
### Customize in Umi
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/), which could be a object or a javascript file path.
You can easily use [theme](https://umijs.org/config/#theme) field in [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [Umi](http://umijs.org/), which could be a object or a javascript file path.
```js
"theme": {

View File

@ -69,9 +69,9 @@ module.exports = {
注意 less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。
### 在 roadhog 或 Umi 里配置主题
### 在 Umi 里配置主题
如果你在使用 [roadhog](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/),那么可以很方便地在项目根目录的 [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18)roadhog或 [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45)Umi文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
如果你在使用 [Umi](http://umijs.org/zh/),那么可以很方便地在项目根目录的 [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45)Umi文件中 [theme](https://umijs.org/zh/config/#theme) 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
```js
"theme": {

View File

@ -88,7 +88,7 @@ Ok, you should now see a blue primary button displayed on the page. Next you can
## Advanced Guides
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue.
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import styles of all components in the project which may be a css bundle size issue (It is OK then if you don't case the gzipped 60kb css file size).
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.

View File

@ -88,7 +88,7 @@ export default App;
## 高级配置
我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。
我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(gzipped 后一共大约 60kb)。
此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) (一个对 create-react-app 进行自定义配置的社区解决方案)。