引言

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

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

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

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

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

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

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

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

很多團(tuán)隊(duì)預(yù)感到這點(diǎn)，很早就開始布局相關(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。

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

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特性，可以讓這些資源統(tǒng)一預(yù)加載。

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

按需polyfill

如果你訪問上述CDN鏈接（https://cdn.skypack.dev/react...），會發(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代碼。

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

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

上述export語句中哈希（oZ1BXZ5opQ1DbTh7nu9r）的不同就對應(yīng)同一個(gè)版本的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格式訪問任意包時(shí)：

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

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

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

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

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

總結(jié)

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

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

以上就是Skypack布局前端基建實(shí)現(xiàn)過程詳解的詳細(xì)內(nèi)容，更多關(guān)于Skypack布局前端基建的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論