本文提供了按需加載了幾種思路，并給出了相應(yīng)實踐。原文地址

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

實驗一：全量引用

import * as _ from 'diana'

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

測試的是 diana 0.4.1

實驗二：部分引用

import { equal } from 'diana'

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

經(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'

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

可以看到打包體積減小約為原來的 1/7 了，但是這種方案在寫法上過于冗長，那要不借助下 babel ？

方案二 + babel

方案三是在方案二的基礎(chǔ)上借助 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í)行三部曲如下:

• 解析

使用 babel-parse 將 JS 代碼解析成 AST 樹

• 轉(zhuǎn)換

配合 babel-traverse 進行 AST 樹的遍歷，同時使用 babel-core 對外暴露的 transform 來調(diào)用相應(yīng)插件來轉(zhuǎn)化 AST 樹

babal.transform(code, {plugins: { pluginA, pluginB } })

• 生成

使用 babel-generator 將 AST 樹轉(zhuǎn)換回 JS 代碼

值得閱讀的文章

• babel 中文官網(wǎng)
• 剖析 Babel —— Babel 總覽，這篇文章講得比較透徹
• babel-handbook，babel 手冊，推薦
• Babel 插件開發(fā)一些示例，這篇文章 bug 比較多，可以作為上面文章的補充
• AST explore，可以在這個網(wǎng)站上看到 JS 代碼對應(yīng)的 AST

轉(zhuǎn)載于:https://www.cnblogs.com/MuYunyun/p/9615455.html

總結(jié)

以上是生活随笔為你收集整理的结合自己造的轮子实践按需加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。