實現antd的按需載入
阿新 • • 發佈:2018-12-10
引言
create-react-app:是一個建立react專案特別方便的腳手架,他幫我們配置好了各種需要使用的工具,減少了很多工作量。antd:是螞蟻金服推出的一個很優秀的react UI庫,其中包含了很多我們經常使用的元件,對於小白學習react來說十分友好!
當我們沒有進行任何配置直接在這個專案中使用antd庫時,會在控制檯看到如下提示:
那麼就有可能是使用了 import { Button } from 'antd';
的寫法引入了 antd 下所有的模組,這會影響應用的網路效能,這時就體現了按需載入的重要性!
那麼,如何實現按需載入呢?
1. 單個元件分別引入對於的元件與樣式
import Button from 'antd/lib/button'; // 需要結構賦值的方式引入 import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 載入 css 檔案
這個方法的優點是比較簡單,不需再次配置,直接載入即可,但是比較麻煩,每次載入一個新的元件都需要先載入元件,在載入元件的css檔案,程式碼冗餘。
2. 使用 babel-plugin-import 來進行按需載入
yarn add babel-plugin-import --dev // 安裝
使用這個外掛之後仍然可以用:import { Button } from 'antd';
來引入元件,但是這個時候外掛會幫你轉換成 antd/lib/xxx 的寫法。另外此外掛配合 style 屬性可以做到模組樣式的按需自動載入。這個時候問題來了,通過create-react-app來建立的react專案的webpack是封裝後的,在專案中是隱藏的,如何修改其配置呢?
下面介紹兩種比較常用的方法:
- yarn eject
- 使用 react-app-rewired
yarn eject:
1. 在使用create-react-app建立專案之後,在package.json中有一個命令:
"scripts": {
"eject": "react-scripts eject"
}
2. 執行yarn eject命令後會在主目錄下生成一個config資料夾,內容就是相關的配置文件。
在執行完yarn eject之後,會將專案中所有的配置項反編譯出來,就可以認開發者任意修改配置項,但是這個過程是不可逆的,一旦執行,就不能恢復,再也不能通過升級其中的react-scripts包來升級create-react-app的特性。
3. 修改webpack.config.dev(開發環境)和webpack.config.prod(構建環境)下的 Process JS with Babel.下的那個options為:
options: {
plugins: [
['import',[{ // 匯入一個外掛
libraryName: 'antd', // 暴露的庫名
style: true // 直接將ants樣式檔案動態編譯成行內樣式插入,就不需要每次都匯入
}]]
],
cacheDirectory: true,
},
和
options: {
plugins: [
['import',[{ // 匯入一個外掛
libraryName: 'antd', // 暴露的庫名
style: true // 直接將ants樣式檔案動態編譯成行內樣式插入,就不需要每次都匯入
}]]
],
compact: true,
},
4. 使用元件:
import { Button } from 'antd';
使用 react-app-rewired
1. 安裝react-app-rewired:
yarn add react-app-rewired --dev
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 --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
3. 然後在專案的根目錄下建立一個 config-overrides.js 用於修改預設配置:
const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', {libraryName: 'antd', style: 'css'}], config);
return config;
};
4. 使用元件:
import { Button } from 'antd';
總結
關於antd的按需載入其實還有其他的方法,本文只介紹了兩種比較常用的配置方法,比如替換 react-scripts 包法和scripts 包 + override 組合法,具體可以參考大佬的文章:https://zhaozhiming.github.io...