資訊專欄INFORMATION COLUMN
摘要：原文地址為了探究按需加載的本質(zhì)，選擇了對先前造的輪子進行實驗。下文就來揭開面紗，并動手改造項目，最終目標是用第二種寫法實現(xiàn)按需加載，減小打包體積。下面給出種可以按需加載的方案。
原文地址
為了探究按需加載的本質(zhì)，選擇了對先前造的輪子 diana 進行實驗。
實驗一：全量引用import * as _ from "diana"
打包體積結果如下：
測試的是 diana 0.4.1實驗二：部分引用
import { equal } from "diana"
打包體積結果如下：
經(jīng)過測試，發(fā)現(xiàn)兩種方式打包后的體積都為 21 k，第二種方式仍然將整個包引入項目中了?？墒?lodash 就是這么玩的呀，這和說好的不一樣呀，難道是忽視了什么細節(jié)么。
下文就來揭開面紗，并動手改造項目，最終目標是用第二種寫法實現(xiàn)按需加載，減小打包體積。
按需加載的方案按需加載的效果是最終打包的代碼里沒有未引入的模塊，從而優(yōu)化項目體積。下面給出 3 種可以按需加載的方案。
給每個函數(shù)多帶帶發(fā)布 npm 模塊按需加載的方案一是將每個函數(shù)都多帶帶發(fā)布一個包，可以在 npm 上查閱 lodash，這種引用方式如下：
import { isEqual } from "lodash.isequal"
每一個函數(shù)都作為一個單一的模塊導出
按需加載的方案二是將每一個函數(shù)都作為一個單一的模塊導出，參照這種思路將 diana 的每個函數(shù)暴露在 lib 目錄下，部分截圖如下：
這時候再來測試下打包體積：
import equal from "diana/lib/equal"
打包體積結果如下：
可以看到打包體積減小約為原來的 1/7 了，但是這種方案在寫法上過于冗長，那要不借助下 babel ？
方案二 + babel方案三是在方案二的基礎上借助 babel 插件后，寫法可以如下:
import { equal } from "diana"
在 .babelrc 里進行如下配置:
// .babelrc
{
"plugins": [
["on-demand-loading", {"library": "diana"}]
]
}
此時打包體積如下：
實際上，babel 插件 的作用是將 import { equal } from "diana" 編譯成 import equal from "diana/lib/equal"。
關于 babel 插件執(zhí)行機制，可以在babel執(zhí)行機制中探討，這里先不展開了。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/97598.html
摘要：起因工作也差不多滿一年了，對于基本的業(yè)務開發(fā)有了一些自己的想法剛開始工作的前個月，每天都可以接觸到新東西，接觸新業(yè)務個月之后業(yè)務開發(fā)熟悉了對于自己的技術成長就感覺受到了局限如果一直沒有作出改變，那么等于是個月的經(jīng)驗要用一年我的學習方式就是多 起因 工作也差不多滿一年了，對于基本的業(yè)務開發(fā)有了一些自己的想法 剛開始工作的前3個月，每天都可以接觸到新東西，接觸新業(yè)務 3個月之后業(yè)務開發(fā)熟...
摘要：十年鏟碼，八大體系超千篇數(shù)百萬字技術筆記系列匯總悅享版十年鏟碼兩茫茫，縱思量，卻易忘不覺筆者步入程序員已有十年。十年之期，正巧筆者從阿里離開，重回打印制造業(yè)的懷抱，希望能依托于設備優(yōu)勢逐步真正構建分布式制造網(wǎng)絡。 showImg(https://segmentfault.com/img/remote/1460000020151971); 十年鏟碼，八大體系超千篇數(shù)百萬字技術筆記系列匯總...
摘要：為此，玉伯當時還特意發(fā)了一條微博，說是應該給和也樹一塊墓碑了。這里，閏土所說的過時，并不是指它現(xiàn)在就不能用了，而是說出現(xiàn)了明顯更加先進的理念或者標準，這會導致未來它的使用場景大為減少，整體趨勢已經(jīng)步入衰落。 showImg(https://segmentfault.com/img/bVYQLf?w=700&h=392); 前言 都已經(jīng)2017年的11月份了，我們項目還打算用seajs？...
摘要：同時，懶加載按需加載概念至關重要。時至今日，這些實現(xiàn)懶加載腳本的代碼仍有學習意義。代碼實戰(zhàn)下面讓我們動手實現(xiàn)一個按需加載輪子。同樣，對于組件也可以使用無狀態(tài)組件函數(shù)式組件實現(xiàn)這樣無疑更加簡潔。 組件化在當今前端開發(fā)領域中是一個非常重要的概念。著名的前端類庫，比如 React、Vue 等對此概念都倍加推崇。確實，組件化復用性（reusability）和模塊性（modularization...
閱讀 3398·2023-04-26 02:27
閱讀 2266·2021-11-22 14:44
閱讀 4287·2021-10-22 09:54
閱讀 3389·2021-10-14 09:43
閱讀 871·2021-09-23 11:53
閱讀 13253·2021-09-22 15:33
閱讀 2846·2019-08-30 15:54
閱讀 2861·2019-08-30 14:04
