成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

0xE7A38A / 782人閱讀

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

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

當(dāng)我們沒(méi)有進(jìn)行任何配置直接在這個(gè)項(xiàng)目中使用antd庫(kù)時(shí)，會(huì)在控制臺(tái)看到如下提示：

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

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

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

2. 使用 babel-plugin-import 來(lái)進(jìn)行按需加載 
yarn add babel-plugin-import --dev     // 安裝

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

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

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

yarn eject

使用 react-app-rewired

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

和

options: {
              plugins: [
                ["import",[{  // 導(dǎo)入一個(gè)插件
                  libraryName: "antd",   // 暴露的庫(kù)名
                  style: true // 直接將ants樣式文件動(dòng)態(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. 然后在項(xiàng)目的根目錄下創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置: 
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的按需加載其實(shí)還有其他的方法，本文只介紹了兩種比較常用的配置方法，比如替換 react-scripts 包法和scripts 包 + override 組合法，具體可以參考大佬的文章：https://zhaozhiming.github.io...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97867.html

相關(guān)文章

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

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

    TesterHome 評(píng)論0 收藏0

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

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

    Eminjannn 評(píng)論0 收藏0

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

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

    tomlingtm 評(píng)論0 收藏0

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

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

    李增田 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<