Skypack：我老早就在布局前端基建了

大家好，我卡頌。

已經(jīng)有越來越多前端開發(fā)者放棄webpack，改用vite作為項目打包工具。

其中最主要的原因是 —— vite在開發(fā)環(huán)境基于ESM規(guī)范實現(xiàn)的Nobundle模式，節(jié)省了「代碼打包」的時間（當(dāng)然，也有ESBuild的功勞）。

而在生產(chǎn)環(huán)境，當(dāng)前仍有打包的需求。

隨著瀏覽器的迭代，ESM規(guī)范兼容性越來越好，終有一天會進(jìn)入「生產(chǎn)環(huán)境大面積可用」的狀態(tài)。



ESM規(guī)范兼容性
屆時「生產(chǎn)環(huán)境打包」將不再是剛需。

另一方面，從HTTP協(xié)議的角度看，在HTTP/1.1時代，多個模塊被打包成一個文件能減少「瀏覽器并發(fā)請求數(shù)」，達(dá)到優(yōu)化目的。

但在HTTP/2多路復(fù)用普及后，這么做的意義就不大了。

可以說，當(dāng)這些基建成熟后，生產(chǎn)環(huán)境使用ESM模塊是水到渠成的事情。

很多團(tuán)隊預(yù)感到這點，很早就開始布局相關(guān)產(chǎn)品。今天要介紹的Skypack就是這樣一款產(chǎn)品。

不一樣的CDN
Skypack首次發(fā)布于19年6月（曾用名Pika CDN），是一款「基于ESM規(guī)范的CDN服務(wù)」。

在瀏覽器中，常見的CDN服務(wù)通常以script標(biāo)簽的形式引入UMD規(guī)范的代碼，以ReactDOM舉例：

<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
代碼執(zhí)行后會在全局暴露對象window.ReactDOM。

一些情況下，一個包還會依賴其他包，比如ReactDOM還會依賴如下3個包：

React

scheduler

object-assign

為了應(yīng)對這種情況，在生產(chǎn)環(huán)境開發(fā)者通常會將第三方依賴統(tǒng)一打包。

而Skypack以ESM規(guī)范引入代碼：

// 在業(yè)務(wù)代碼中引入如下語句
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
瀏覽器會依次發(fā)起對「包及其依賴」的請求：










配合上瀏覽器的Module Preload[1]特性，可以讓這些資源統(tǒng)一預(yù)加載。

這就解決了第三方依賴需要打包的問題。

按需polyfill
如果你訪問上述CDN鏈接（https://cdn.skypack.dev/react-dom），會發(fā)現(xiàn)返回的結(jié)果并不是ReactDOM的代碼，而是下面兩句export語句：

export * from '/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/react-dom.js';
export {default} from '/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/react-dom.js';





語句的背后才是ESM規(guī)范的ReactDOM代碼。

之所以這么做是因為：Skypack會根據(jù)「目標(biāo)瀏覽器的UA」為瀏覽器提供適合的包。

在高版本Chrome中的代碼不需要polyfill，而在低版本IE中的代碼需要polyfill，所以不同目標(biāo)瀏覽器拿到的是不同的ReactDOM代碼。

上述export語句中哈希（oZ1BXZ5opQ1DbTh7nu9r）的不同就對應(yīng)「同一個版本的ReactDOM經(jīng)過不同程度polyfill后的不同結(jié)果」。

此外，在url后加min能得到「壓縮后的代碼」：

import ReactDOM from 'https://cdn.skypack.dev/react-dom?min';
接下來讓我們看看Skypack是如何處理請求的。

處理請求的流程
并不是所有包都有ESM規(guī)范的產(chǎn)物（React就沒有），當(dāng)以如下url格式訪問任意包時：

// xxx替換為任意包名
import React from 'https://cdn.skypack.dev/xxx';
如果之前從未有人訪問過這個包，則會「構(gòu)建包及其依賴的ESM產(chǎn)物」并返回。

比如ReactDOM本身只提供UMD規(guī)范的產(chǎn)物，第一個訪問他的Skypack CDN鏈接的用戶會經(jīng)歷如下步驟：

收集ReactDOM及其依賴

將ReactDOM及其依賴變?yōu)镋SM規(guī)范

構(gòu)建不同polyfill程度的ESM產(chǎn)物

根據(jù)目標(biāo)瀏覽器UA返回對應(yīng)的ReactDOM

在ReactDOM的產(chǎn)物代碼中可以看到，他依賴的三個包已經(jīng)轉(zhuǎn)為ESM規(guī)范：



總結(jié)
除了Skypack外，esm.sh[2]也是類似功能的ESM CDN服務(wù)。

等到前端基建成熟的那天，相信這些ESM CDN服務(wù)一定能大放異彩。

參考資料
[1]
Module Preload:
https://developer.chrome.com/blog/modulepreload/

[2]
esm.sh:
https://esm.sh/

作者：卡頌


歡迎關(guān)注微信公眾號 ：魔術(shù)師卡頌