国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

實現(xiàn)antd的按需加載

0xE7A38A / 738人閱讀

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

引言 
create-react-app：是一個創(chuàng)建react項目特別方便的腳手架，他幫我們配置好了各種需要使用的工具，減少了很多工作量。
antd：是螞蟻金服推出的一個很優(yōu)秀的react UI庫，其中包含了很多我們經(jīng)常使用的組件，對于小白學(xué)習(xí)react來說十分友好！

當我們沒有進行任何配置直接在這個項目中使用antd庫時，會在控制臺看到如下提示：

那么就有可能是使用了 import { Button } from "antd"; 的寫法引入了 antd 下所有的模塊，這會影響應(yīng)用的網(wǎng)絡(luò)性能，這時就體現(xiàn)了按需加載的重要性！

那么，如何實現(xiàn)按需加載呢？ 1. 單個組件分別引入對應(yīng)的組件與樣式 
import Button from "antd/lib/button";  // 需要結(jié)構(gòu)賦值的方式引入
import "antd/lib/button/style"; // 或者 antd/lib/button/style/css 加載 css 文件

這個方法的優(yōu)點是比較簡單，不需再次配置，直接加載即可，但是比較麻煩，每次載入一個新的組件都需要先載入組件，在加載組件的css文件，代碼冗余。

2. 使用 babel-plugin-import 來進行按需加載 
yarn add babel-plugin-import --dev     // 安裝

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

使用這個插件之后仍然可以用：import { Button } from "antd";來引入組件，但是這個時候插件會幫你轉(zhuǎn)換成 antd/lib/xxx 的寫法。另外此插件配合 style 屬性可以做到模塊樣式的按需自動加載。這個時候問題來了，通過create-react-app來創(chuàng)建的react項目的webpack是封裝后的，在項目中是隱藏的，如何修改其配置呢？

下面介紹兩種比較常用的方法：

yarn eject

使用 react-app-rewired

yarn eject: 1. 在使用create-react-app創(chuàng)建項目之后，在package.json中有一個命令： 
 "scripts": {
    "eject": "react-scripts eject"
  }
2. 執(zhí)行yarn eject命令后會在主目錄下生成一個config文件夾,內(nèi)容就是相關(guān)的配置文檔。 
在執(zhí)行完yarn eject之后，會將項目中所有的配置項反編譯出來，就可以認開發(fā)者任意修改配置項，但是這個過程是不可逆的，一旦執(zhí)行，就不能恢復(fù)，再也不能通過升級其中的react-scripts包來升級create-react-app的特性。
3. 修改webpack.config.dev（開發(fā)環(huán)境）和webpack.config.prod（構(gòu)建環(huán)境）下的 Process JS with Babel.下的那個options為： 
options: {
             plugins: [
               ["import",[{  // 導(dǎo)入一個插件
                 libraryName: "antd",   // 暴露的庫名
                 style: true // 直接將ants樣式文件動態(tài)編譯成行內(nèi)樣式插入，就不需要每次都導(dǎo)入
               }]]
             ],
             cacheDirectory: true,
           },

和

options: {
              plugins: [
                ["import",[{  // 導(dǎo)入一個插件
                  libraryName: "antd",   // 暴露的庫名
                  style: true // 直接將ants樣式文件動態(tài)編譯成行內(nèi)樣式插入，就不需要每次都導(dǎo)入
                }]]
              ],
              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. 然后在項目的根目錄下創(chuàng)建一個 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";
總結(jié)

關(guān)于antd的按需加載其實還有其他的方法，本文只介紹了兩種比較常用的配置方法，比如替換 react-scripts 包法和scripts 包 + override 組合法，具體可以參考大佬的文章：https://zhaozhiming.github.io...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97867.html

相關(guān)文章

  • 實現(xiàn)element-ui的按需引入，按需打包加載

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

    TesterHome 評論0 收藏0

  • 使用less-loader與antd按需加載(babel-plugin-import)的坑

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

    Eminjannn 評論0 收藏0

  • 記一次 webpack 打包體積優(yōu)化

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

    tomlingtm 評論0 收藏0

  • webpack4大結(jié)局：加入騰訊IM配置策略，實現(xiàn)前端工程化環(huán)境極致優(yōu)化

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

    李增田 評論0 收藏0

發(fā)表評論

0條評論

0xE7A38A

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<