大家好，我卡頌。

成都創(chuàng)新互聯(lián)公司專注于海棠企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城系統(tǒng)網(wǎng)站開發(fā)。海棠網(wǎng)站建設(shè)公司,為海棠等地區(qū)提供建站服務(wù)。全流程按需定制網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

已經(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ī)范兼容性越來越好，終有一天會進入「生產(chǎn)環(huán)境大面積可用」的狀態(tài)。

ESM規(guī)范兼容性

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

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

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

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

很多團隊預(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舉例：

代碼執(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 '/-/[email protected]/dist=es2019,mode=imports/optimized/react-dom.js';
export {default} from '/-/[email protected]/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/。

網(wǎng)頁標(biāo)題：Skypack：我老早就在布局前端基建了
文章出自：http://uogjgqi.cn/article/cohcjps.html