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

資訊專(zhuān)欄INFORMATION COLUMN

結(jié)合自己造的輪子實(shí)踐按需加載

Alfred / 2292人閱讀

摘要：原文地址為了探究按需加載的本質(zhì)，選擇了對(duì)先前造的輪子進(jìn)行實(shí)驗(yàn)。下文就來(lái)揭開(kāi)面紗，并動(dòng)手改造項(xiàng)目，最終目標(biāo)是用第二種寫(xiě)法實(shí)現(xiàn)按需加載，減小打包體積。下面給出種可以按需加載的方案。

原文地址

為了探究按需加載的本質(zhì)，選擇了對(duì)先前造的輪子 diana 進(jìn)行實(shí)驗(yàn)。

實(shí)驗(yàn)一：全量引用 
import * as _ from "diana"

打包體積結(jié)果如下：

測(cè)試的是 diana 0.4.1
實(shí)驗(yàn)二：部分引用 
import { equal } from "diana"

打包體積結(jié)果如下：

經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)兩種方式打包后的體積都為 21 k，第二種方式仍然將整個(gè)包引入項(xiàng)目中了。可是 lodash 就是這么玩的呀，這和說(shuō)好的不一樣呀，難道是忽視了什么細(xì)節(jié)么。

下文就來(lái)揭開(kāi)面紗，并動(dòng)手改造項(xiàng)目，最終目標(biāo)是用第二種寫(xiě)法實(shí)現(xiàn)按需加載，減小打包體積。

按需加載的方案

按需加載的效果是最終打包的代碼里沒(méi)有未引入的模塊，從而優(yōu)化項(xiàng)目體積。下面給出 3 種可以按需加載的方案。

給每個(gè)函數(shù)多帶帶發(fā)布 npm 模塊

按需加載的方案一是將每個(gè)函數(shù)都多帶帶發(fā)布一個(gè)包，可以在 npm 上查閱 lodash，這種引用方式如下：

import { isEqual } from "lodash.isequal"
每一個(gè)函數(shù)都作為一個(gè)單一的模塊導(dǎo)出

按需加載的方案二是將每一個(gè)函數(shù)都作為一個(gè)單一的模塊導(dǎo)出，參照這種思路將 diana 的每個(gè)函數(shù)暴露在 lib 目錄下，部分截圖如下：

這時(shí)候再來(lái)測(cè)試下打包體積：

import equal from "diana/lib/equal"

打包體積結(jié)果如下：

可以看到打包體積減小約為原來(lái)的 1/7 了，但是這種方案在寫(xiě)法上過(guò)于冗長(zhǎng)，那要不借助下 babel ？

方案二 + babel

方案三是在方案二的基礎(chǔ)上借助 babel 插件后，寫(xiě)法可以如下:

import { equal } from "diana"

在 .babelrc 里進(jìn)行如下配置:

// .babelrc
{
  "plugins": [
    ["on-demand-loading", {"library": "diana"}]
  ]
}

此時(shí)打包體積如下：

實(shí)際上，babel 插件 的作用是將 import { equal } from "diana" 編譯成 import equal from "diana/lib/equal"。

關(guān)于 babel 插件執(zhí)行機(jī)制，可以在babel執(zhí)行機(jī)制中探討，這里先不展開(kāi)了。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/97598.html

相關(guān)文章

  • 一年前端造的輪子是什么樣子？

    摘要：起因工作也差不多滿(mǎn)一年了，對(duì)于基本的業(yè)務(wù)開(kāi)發(fā)有了一些自己的想法剛開(kāi)始工作的前個(gè)月，每天都可以接觸到新東西，接觸新業(yè)務(wù)個(gè)月之后業(yè)務(wù)開(kāi)發(fā)熟悉了對(duì)于自己的技術(shù)成長(zhǎng)就感覺(jué)受到了局限如果一直沒(méi)有作出改變，那么等于是個(gè)月的經(jīng)驗(yàn)要用一年我的學(xué)習(xí)方式就是多 起因 工作也差不多滿(mǎn)一年了，對(duì)于基本的業(yè)務(wù)開(kāi)發(fā)有了一些自己的想法 剛開(kāi)始工作的前3個(gè)月，每天都可以接觸到新東西，接觸新業(yè)務(wù) 3個(gè)月之后業(yè)務(wù)開(kāi)發(fā)熟...

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

  • 十年鏟碼，八大體系超千篇數(shù)百萬(wàn)字技術(shù)筆記系列匯總（GitBook 悅享版）

    摘要：十年鏟碼，八大體系超千篇數(shù)百萬(wàn)字技術(shù)筆記系列匯總悅享版十年鏟碼兩茫茫，縱思量，卻易忘不覺(jué)筆者步入程序員已有十年。十年之期，正巧筆者從阿里離開(kāi)，重回打印制造業(yè)的懷抱，希望能依托于設(shè)備優(yōu)勢(shì)逐步真正構(gòu)建分布式制造網(wǎng)絡(luò)。 showImg(https://segmentfault.com/img/remote/1460000020151971); 十年鏟碼，八大體系超千篇數(shù)百萬(wàn)字技術(shù)筆記系列匯總...

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

  • 那些年造的輪子，我們?cè)摓檎l(shuí)樹(shù)墓碑？

    摘要：為此，玉伯當(dāng)時(shí)還特意發(fā)了一條微博，說(shuō)是應(yīng)該給和也樹(shù)一塊墓碑了。這里，閏土所說(shuō)的過(guò)時(shí)，并不是指它現(xiàn)在就不能用了，而是說(shuō)出現(xiàn)了明顯更加先進(jìn)的理念或者標(biāo)準(zhǔn)，這會(huì)導(dǎo)致未來(lái)它的使用場(chǎng)景大為減少，整體趨勢(shì)已經(jīng)步入衰落。 showImg(https://segmentfault.com/img/bVYQLf?w=700&h=392); 前言 都已經(jīng)2017年的11月份了，我們項(xiàng)目還打算用seajs？...

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

  • 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

    摘要：同時(shí)，懶加載按需加載概念至關(guān)重要。時(shí)至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣，對(duì)于組件也可以使用無(wú)狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無(wú)疑更加簡(jiǎn)潔。 組件化在當(dāng)今前端開(kāi)發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類(lèi)庫(kù)，比如 React、Vue 等對(duì)此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...

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

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

0條評(píng)論

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