test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

update doc about Import on Demand

Browse Source
This commit is contained in:
afc163 2017-01-09 21:03:12 +08:00
parent 1c493ad798
commit d0727df147
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/react/getting-started.en-US.md
View File

@ -160,13 +160,18 @@ There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129)
## Import on Demand ## Import on Demand
If we import a component like this `import { Button } from 'antd';`, then all the components of antd will be imported. But, we can import component on demand: If you see a log like below screenshot, you might import all components by writing `import { Button } from 'antd';`, this will affect your app's network perfermance.
> ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png
But, we can import component on demand:
```jsx ```jsx
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Button from 'antd/lib/button/style/css'; // import style
``` ```
If you use `babel`, we recommend to use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import). This plugin will convert the following code to the above form: We strongly recommend to use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
```jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';

11
docs/react/getting-started.zh-CN.md
View File

@ -158,19 +158,24 @@ IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016
## 按需加载 ## 按需加载
通过 `import { Button } from 'antd';` 引入会加载 antd 下所有的模块，如果要按需加载可以通过以下的写法来引用。 如果你在控制台看到下面的提示，则你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
> ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png
可以通过以下的写法来按需加载组件。
```jsx ```jsx
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Button from 'antd/lib/button/style/css'; // 按需引入 css
``` ```
如果你使用 babel，我们推荐使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写： 如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写：
```jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
``` ```
插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。 插件会帮你转换成 `antd/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
## 配置主题和字体 ## 配置主题和字体