成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Skypack布局前端基建實(shí)現(xiàn)過程詳解

3403771864 / 685人閱讀

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

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

1.jpg

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

　　另一方面，從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)簽的形式引入U(xiǎn)MD規(guī)范的代碼，以ReactDOM舉例：

　　<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

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

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

　　React

　　scheduler

　　object-assign

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

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

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

　　瀏覽器會(huì)依次發(fā)起對包及其依賴的請求：

2.jpg

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

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

　　按需polyfill

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

　　之所以這么做是因?yàn)椋篠kypack會(huì)根據(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è)包，則會(huì)構(gòu)建包及其依賴的ESM產(chǎn)物并返回。

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

　　收集ReactDOM及其依賴

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

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

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

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

3.jpg

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127676.html

相關(guān)文章

  • 新的一年，中國云計(jì)算有哪些新的亮點(diǎn)和變化？

    摘要：通過新鮮出爐的調(diào)研數(shù)據(jù)讓我們一起來看看年中國市場云計(jì)算有哪些新的亮點(diǎn)和變化云計(jì)算持續(xù)增長，云原生成主要驅(qū)動(dòng)力云依舊是企業(yè)級(jí)用戶年的第一戰(zhàn)略重點(diǎn)。調(diào)查顯示圖，目前中國企業(yè)將通過企業(yè)級(jí)一致性混合多云布局工業(yè)互聯(lián)網(wǎng)作為戰(zhàn)略重點(diǎn)。云計(jì)算從最初的概念到如今的廣泛落地，企業(yè)上云之路在逐漸豐富的同時(shí)，對于云的需求也在逐漸發(fā)生變化就IT現(xiàn)代化，相對于早期的云敏態(tài)和傳統(tǒng)架構(gòu)穩(wěn)態(tài)，如今企業(yè)用戶面臨更多的是如何打...

    Tecode 評論0 收藏0

  • 技術(shù)棧：小菜前端的技術(shù)棧是如何規(guī)劃和演進(jìn)的

    摘要：本文以管理者的視角，與大家分享下我自年月入職小菜后，與前端同學(xué)一起是如何規(guī)劃團(tuán)隊(duì)的技術(shù)棧的，這條技術(shù)棧上的技能點(diǎn)又是如何在不同童鞋不同業(yè)務(wù)中生長出來的。 Scott 近兩年無論是面試還是線下線上的技術(shù)分享，遇到許許多多前端同學(xué)，由于團(tuán)隊(duì)原因，個(gè)人原因，職業(yè)成長，技術(shù)方向，甚至家庭等等原因，在理想國與現(xiàn)實(shí)之間，在放棄與堅(jiān)守之間，搖擺不停，心酸硬抗，大家可以找我聊聊南聊聊北，對工程師的宿命...

    betacat 評論0 收藏0

  • 與企業(yè)連體的百度云，正在編織一張生態(tài)大網(wǎng)

    摘要：乘著云計(jì)算強(qiáng)勁發(fā)展的東風(fēng)，百度云繼續(xù)加固生態(tài)化護(hù)城河。百度云編織的生態(tài)巨網(wǎng)事實(shí)上，百度云在生態(tài)和落地方面的加速度很明顯。從年開放運(yùn)營至今，百度云儼然已經(jīng)編織了一張巨大的生態(tài)之網(wǎng)，具體可以從三個(gè)方面來細(xì)看。乘著云計(jì)算、AI強(qiáng)勁發(fā)展的東風(fēng)，百度云繼續(xù)加固生態(tài)化護(hù)城河。12月6日，在2018百度ABC Inspire企業(yè)智能大會(huì)上，百度副總裁、百度云總經(jīng)理尹世明宣布ABC企業(yè)智能合作伙伴聯(lián)盟正式成...

    Baaaan 評論0 收藏0

  • ELSE 技術(shù)周刊(2017.11.27期)

    摘要：而且已開源出來，隨著容器技術(shù)發(fā)展，大文件分發(fā)一直是個(gè)重要的問題，所以是一件值得研究的技術(shù)。實(shí)用推薦檢定攻略是近期推出的一項(xiàng)認(rèn)證，用以認(rèn)證開發(fā)者的移動(dòng)網(wǎng)頁開發(fā)技能。凈化，移除中不必要的文件技術(shù)周刊由小組出品，匯聚一周好文章，周刊原文。 業(yè)界動(dòng)態(tài) 直擊阿里雙11神秘技術(shù)：PB級(jí)大規(guī)模文件分發(fā)系統(tǒng)蜻蜓 文章主要介紹了阿里的PB級(jí)大規(guī)模文件分發(fā)系統(tǒng)蜻蜓， 通過使用P2P技術(shù)同時(shí)結(jié)合智能壓縮、智...

    xushaojieaaa 評論0 收藏0

  • 讓私有云持續(xù)進(jìn)化，UCloudStack2.0強(qiáng)勢升級(jí)

    摘要：隨著新基建進(jìn)程以及企業(yè)上云步伐的加快，私有云市場正迎來黃金發(fā)展階段，作為擁有公有云基因的云計(jì)算服務(wù)商，將公有云核心能力輸出至私有云產(chǎn)品，于年用戶大會(huì)上正式推出輕量級(jí)私有云產(chǎn)品。隨著新基建進(jìn)程以及企業(yè)上云步伐的加快，私有云市場正迎來黃金發(fā)展階段，UCloud作為擁有公有云基因的云計(jì)算服務(wù)商，將公有云核心能力輸出至私有云產(chǎn)品，于2020年用戶大會(huì)上正式推出UCloudStack2.0輕量級(jí)私有云...

    Tecode 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<