結合本身造的輪子實踐按需加載

原文地址

爲了探究按需加載的本質，選擇了對先前造的輪子 diana 進行實驗。

實驗一：全量引用

import * as _ from 'diana'

打包體積結果以下：

測試的是 diana 0.4.1

實驗二：部分引用

import { equal } from 'diana'

打包體積結果以下：

通過測試，發現兩種方式打包後的體積都爲 21 k，第二種方式仍然將整個包引入項目中了。但是 lodash 就是這麼玩的呀，這和說好的不同呀，難道是忽視了什麼細節麼。

下文就來揭開面紗，並動手改造項目，最終目標是用第二種寫法實現按需加載，減少打包體積。

按需加載的方案

按需加載的效果是最終打包的代碼裏沒有未引入的模塊，從而優化項目體積。下面給出 3 種能夠按需加載的方案。

給每一個函數單獨發佈 npm 模塊

按需加載的方案一是將每一個函數都單獨發佈一個包，能夠在 npm 上查閱 lodash，這種引用方式以下：

import { isEqual } from 'lodash.isequal'

每個函數都做爲一個單一的模塊導出

按需加載的方案二是將每個函數都做爲一個單一的模塊導出，參照這種思路將 diana 的每一個函數暴露在 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 插件執行機制，能夠在babel執行機制中探討，這裏先不展開了。