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 代碼都可以按需加載，提高網頁性能。