react配置Ant Design按需加載

antd這個UI庫體積較大,在項目中如果我們採取全部引入的方式將會使項目的性能收到大幅降低,手動按需加載的話當然不是我們希望的做法,所以配置自動按需加載還是很有必要的下面來看如何配置。（注：前提是項目已經安裝了antd）

1.安裝相關依賴包：

yarn add react-app-rewired customize-cra

這裏react-app-rewired 不用彈射就可以配置webpack
customize-cra 自定義腳手架環境

2.打開package.json文件修改下方配置：

"scripts": {
      "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-scripts eject"

將start、build、test、後react-scripts改爲react-app-rewired

3.在項目的根目錄下創建一個config-overrides.js文件：

4.安裝babel-plugin-import:

yarn add babel-plugin-import

5.在我們上面創建的config-overrides.js文件中作如下配置：

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

6.重新啓動項目就可以實現antd的自動按需加載了

react項目中配置ant design的按需加載就說到這裏,希望對你有幫助~~