用vite作為項目打包工具，這是為什么？其中最主要的原因是 ——vite在開發(fā)環(huán)境基于ESM規(guī)范實現(xiàn)的Nobundle模式，節(jié)省了代碼打包的時間。

　　當前打包的需求任然有，且ESM規(guī)范兼容性越來越好，進入生產(chǎn)環(huán)境大面積可用的狀態(tài)也不是不可能。

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

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

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

　　可以說，當這些基建成熟后，生產(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標簽的形式引入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特性，可以讓這些資源統(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代碼。

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

　　在高版本Chrome中的代碼不需要polyfill，而在低版本IE中的代碼需要polyfill，所以不同目標瀏覽器拿到的是不同的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就沒有），當以如下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ù)目標瀏覽器UA返回對應(yīng)的ReactDOM

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

　   結(jié)尾：其實很多功能都在日益變化，增加，不斷的更新學習才是我們的思路。