實現antd的按需加載

0xE7A38A 發布于2019-08-23 12:02 / 751人閱讀

摘要：使用來進行按需加載安裝關于插件的介紹和使用，可參考使用這個插件之后仍然可以用來引入組件，但是這個時候插件會幫你轉換成的寫法。另外此插件配合屬性可以做到模塊樣式的按需自動加載。

引言

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     // 安裝

關于插件的介紹和使用，可參考：https://blog.csdn.net/qq_3580...

使用這個插件之后仍然可以用：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...

GPU云服務器云服務器按需加載按需加載javascript webpack按需加載實現加載動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97867.html

實現element-ui的按需引入，按需打包加載

摘要：簡單說明原理使用實現按需引入打包。這里采用多入口配置，實現各個功能模塊分別打包成一個文件，并使用將樣式進行抽離后，按入口進行打包為對應的文件。只要在指定入口名為。這個相關配置已經發布了包。簡單說明原理：使用babel-plugin-component實現按需引入、打包。將webpack配置成多入口，保證最終打包的目錄結構符合babel-plugin-component插件的要求，實...

TesterHome 2019-08-23 10:41 評論0 收藏0
使用less-loader與antd按需加載(babel-plugin-import)的坑

摘要：的按需加載設置安裝插件修改或新建文件進行編輯，但兩者只能存一種根據配置更改主題顏色在中找到原配置注釋后更改為定義全局樣式配置自定義主題只需修改的顏色，再重啟項目即可更改主題顏色為了在react中使用antd以及它的主題更改，需要在項目中 yarn eject 暴露出webpack文件進行改造本答案是在日期當時最新的create-react-app上的webpack版本 less-l...

Eminjannn 2019-08-26 14:00 評論0 收藏0
記一次 webpack 打包體積優化

摘要：手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得，所以現在必須進行優化。用于生產環境的打包，設置其為后，這些庫會提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結果的體積開銷主要就是以上幾項。手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得6MB+，所以現在必須進行優化。打包結果分析執行命令 webpack ...

tomlingtm 2019-08-26 11:47 評論0 收藏0
webpack4大結局：加入騰訊IM配置策略，實現前端工程化環境極致優化

摘要：或者的，都會對其進行分析。舒適的開發體驗，有助于提高我們的開發效率，優化開發體驗也至關重要組件熱刷新熱刷新自從推出熱刷新后，前端開發者在開環境下體驗大幅提高。實現熱調試后，調試流程大幅縮短，和普通非直出模式調試體驗保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源不知道不...

李增田 2019-08-30 11:09 評論0 收藏0