添加AntD

工程已经存在 我们在工程的基础上添加UI组件库 这里选择的是Ant Design。

在项目安装antd依赖

1.安装antd依赖

yarn add antd
或者
npm install antd

本文使用版本 antd - version 3.15.0

2.添加antd 组件代码

// App.js
+ import {Layout} from 'antd'
+ const {Sider, Header, Content, Footer} = Layout

class App extends Component {
 render() {
  return (
   <div className="App">
+    <Layout>
+     <Sider>Sider</Sider>
+     <Layout>
+      <Header>Header</Header>
+      <Content>Content</Content>
+      <Footer>Footer</Footer>
+     </Layout>
+    </Layout>
   </div>
  );
 }
}

3.添加样式

第一种方式： 在CSS文件中引入

// App.css
// 第一行
+ @import '~antd/dist/antd.css';
// 其他...

第二种方式：在页面入口的js文件中引入

// App.js
// 第一行
+ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
// 其他...

第三种方式：在webpack中使用 babel-plugin-import （推荐）
babel-plugin-import 会帮助你加载JS和CSS，并且实现按需加载
1.安装 babel-plugin-import 依赖

npm install --save-dev babel-plugin-import

// 添加在babel转译的部分
// .babelrc or babel-loader option
// webpack.config.js
{
 "plugins": [
338+  ["import", {
+     "libraryName": "antd",
+     "libraryDirectory": "es",
+     "style": "css" // `style: true` 会加载 less 文件
+    }]
 ]
}

4.验证结果 和 按需加载

yarn start

不按需加载时请求的文件：

按需加载时请求的文件：

antd文件大概可以减少60%的大校

这样我们就基本完成了 antdUI组件的加载。