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