React之Ant Design使用和高级配置按需加载。

学了一周的ReactJS，最后接触到这个UI框架来构建一些好看的页面，使用antd的一些步骤，记录一下，方便以后查阅。

1. 现在从 yarn 或 npm 安装并引入 antd

yarn add antd

2. 修改 src/App.js，引入自己需要的antd组件（比如按钮）。

import Button from 'antd/es/button'

3. 在src/App.css 文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

以上步骤演示实例，加载了全部的 antd 组件的样式，比较简单粗暴，使用方便，但从性能角度来讲，按需加载组件肯定比加载全部组件性能要高，如果公司规定开发中不能有多余的css存在，那么就需要配置高级设置，需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired，具体步骤如下：

1. 引入 react-app-rewired 并修改 package.json 里的启动配置

 yarn add react-app-rewired customize-cra --save                （--save是模块化安装，不加--save是全局安装）

/* package.json文件中 */

"scripts": {
   "start": "react-scripts start",//删掉替换为 react-app-rewired start 如下
   "start": "react-app-rewired start",
   "build": "react-scripts build",//删掉替换为 react-app-rewired build 如下
   "build": "react-app-rewired build",
   "test": "react-scripts test",  //删掉替换为 react-app-rewired test 如下
   "test": "react-app-rewired test",
}

2. 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
   }),
);

3.babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件，安装它并修改 config-overrides.js文件。

yarn add babel-plugin-import                 （上面第二部已经修改好了config-ocerrides.js文件，直接拷贝进 config-overrides.js即可）

4.移除前面在 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>
      );
    }
  }

5.这样就配置完成了，最后重启 npm start 访问页面，antd 组件的 js 和 css 代码都可以按需加载，提高网页性能。