react 使用antd 按需加載

使用 react-app-rewired

1. 安裝react-app-rewired：

由於新的 react-app-rewired@2.x 版本的關系，你還需要安裝 customize-cra。

yarn add react-app-rewired customize-cra
//
npm install react-app-rewired customize-cra

2. 修改package.json:

/* package.json 的配置需要做如下修改*/
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

使用 babel-plugin-import#

babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件（原理），現在我們嘗試安裝它並修改 config-overrides.js 文件。

yarn add babel-plugin-import
//
npm install babel-plugin-import

 

3. 然后在項目的根目錄下創建一個 config-overrides.js 用於修改默認配置:

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

4. 使用組件：

import { Button } from 'antd';

 最后重啟 yarn start 訪問頁面，antd 組件的 js 和 css 代碼都會按需加載，你在控制台也不會看到這樣的警告信息。關於按需加載的原理和其他方式可以閱讀這里。

 官網地址：antd高級配置