大家好，我卡頌。

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

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

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

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

ESM規(guī)范兼容性

屆時(shí)「生產(chǎn)環(huán)境打包」將不再是剛需。

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

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

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

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

不一樣的CDN

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

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

<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>

代碼執(zhí)行后會(huì)在全局暴露對(duì)象window.ReactDOM。

一些情況下，一個(gè)包還會(huì)依賴(lài)其他包，比如ReactDOM還會(huì)依賴(lài)如下3個(gè)包：

• React
• scheduler
• object-assign

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

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

// 在業(yè)務(wù)代碼中引入如下語(yǔ)句
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

瀏覽器會(huì)依次發(fā)起對(duì)「包及其依賴(lài)」的請(qǐng)求：

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

這就解決了第三方依賴(lài)需要打包的問(wèn)題。

按需polyfill

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

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';

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

之所以這么做是因?yàn)椋篠kypack會(huì)根據(jù)「目標(biāo)瀏覽器的UA」為瀏覽器提供適合的包。

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

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

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

import ReactDOM from 'https://cdn.skypack.dev/react-dom?min';

接下來(lái)讓我們看看Skypack是如何處理請(qǐng)求的。

處理請(qǐng)求的流程

并不是所有包都有ESM規(guī)范的產(chǎn)物（React就沒(méi)有），當(dāng)以如下url格式訪問(wèn)任意包時(shí)：

// xxx替換為任意包名
import React from 'https://cdn.skypack.dev/xxx';

如果之前從未有人訪問(wèn)過(guò)這個(gè)包，則會(huì)「構(gòu)建包及其依賴(lài)的ESM產(chǎn)物」并返回。

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

• 收集ReactDOM及其依賴(lài)。
• 將ReactDOM及其依賴(lài)變?yōu)镋SM規(guī)范。
• 構(gòu)建不同polyfill程度的ESM產(chǎn)物。
• 根據(jù)目標(biāo)瀏覽器UA返回對(duì)應(yīng)的ReactDOM。

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

總結(jié)

除了Skypack外，esm.sh[2]也是類(lèi)似功能的ESM CDN服務(wù)。

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

參考資料

[1]Module Preload:https://developer.chrome.com/blog/modulepreload/。

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