Web捆綁包通過(guò)將多個(gè)資產(chǎn)包裝到單個(gè)文件中，以提高Web資源分配，以提高效率，脫機(jī)能力和隱私性交付； 1。通過(guò)將HTML，CSS，JS和圖像捆綁到一個(gè).wbn文件中，它們減少了網(wǎng)絡(luò)往返。 2。通過(guò)服務(wù)工人提前加載即時(shí)導(dǎo)航； 3。支持P2P網(wǎng)絡(luò)或不可靠的CDN上的分散分佈； 4.通過(guò)整個(gè)頁(yè)面資源的統(tǒng)一緩存提高緩存效率； 5。保留捆綁包中的原始URL，以維護(hù)路由和進(jìn)口；儘管瀏覽器的支持是有限的，並且工具需要仔細(xì)處理，但它們?yōu)殛P(guān)鍵性和離線(xiàn)應(yīng)用程序提供了前瞻性的解決方案。

Web捆綁包是一種新興的Web標(biāo)準(zhǔn)，旨在使資源分佈更加有效，尤其是在來(lái)自多個(gè)起源的加載資產(chǎn)可以減速或由於網(wǎng)絡(luò)條件而失敗的情況。 Web捆綁包在他們的核心中，您可以包裝多個(gè)Web資源，例如HTML，CSS，JavaScript，Images，可以將一個(gè)可以作為一個(gè)單元提供，共享或流式傳輸?shù)膯蝹€(gè)文件。

這不僅僅是捆綁文件，而是啟用新的方法來(lái)以更好的性能，離線(xiàn)支持甚至改善隱私。

什麼是網(wǎng)絡(luò)捆綁包？

Web捆綁包（正式簽名的交易所和Web軟件包捆綁包）是WICG（Web孵化器社區(qū)組）的Web包裝計(jì)劃的一部分。它們使開(kāi)發(fā)人員可以將資源集合（例如，完整的網(wǎng)頁(yè)及其依賴(lài)項(xiàng)）捆綁在一起，將其捆綁到一個(gè).wbn文件中。

關(guān)鍵功能：

• 獨(dú)立的：所有資產(chǎn)均包裝，可以從一個(gè)文件中加載。
• URL提供：每個(gè)資源都保留其原始URL，因此相對(duì)路徑和導(dǎo)入仍然有效。
• 可以通過(guò)服務(wù)工人加載：可以截獲捆綁包，並通過(guò)緩存或自定義協(xié)議提供。
• 簽名（可選） ：可以在密碼上簽名以驗(yàn)證來(lái)源和完整性。

它們特別有用：

• 預(yù)加載內(nèi)容
• 脫機(jī)申請(qǐng)
• 通過(guò)不可靠的連接性在點(diǎn)對(duì)點(diǎn)網(wǎng)絡(luò)或CDN上分發(fā)內(nèi)容
• 通過(guò)減少往返來(lái)提高感知性能

它們?nèi)绾胃纳瀑Y源分配？

傳統(tǒng)的Web加載依賴(lài)於跨域，DNS查找，TLS握手的多個(gè)HTTP請(qǐng)求 - 添加延遲。 Web捆綁包通過(guò)以下方式減少了此開(kāi)銷(xiāo)

1. 減少網(wǎng)絡(luò)往返
   瀏覽器可以下載一個(gè)捆綁包並提取所有需要的資源，而不是獲取HTML，然後是CSS，然後是JS，然後是字體等。

2. 提前交貨
   您可以將包含可能訪(fǎng)問(wèn)的頁(yè)面的Web捆綁包流。例如，在用戶(hù)降落在主頁(yè)上後，服務(wù)工作者可以為“大約”頁(yè)面預(yù)取捆綁包，並在單擊時(shí)立即使用（即使是脫機(jī)）。

3. 支持分散交付
   捆綁包可以通過(guò)IPF，藍(lán)牙甚至電子郵件共享。由於它們具有獨(dú)立和網(wǎng)址，因此它們像保留路由和資產(chǎn)結(jié)構(gòu)的迷你網(wǎng)站一樣工作。

4. 提高緩存效率
   可以在會(huì)話(huà)或設(shè)備之間緩存並重複使用一個(gè)捆綁包。結(jié)合Cache API和服務(wù)工作者，這可以實(shí)現(xiàn)強(qiáng)大的離線(xiàn)UX。

實(shí)際用例：捆綁

想像一個(gè)新聞網(wǎng)站。當(dāng)用戶(hù)閱讀文章時(shí)，您知道他們可能會(huì)單擊系列中的下一個(gè)。

您不能等待下一頁(yè)加載，而是可以：

• 預(yù)加載一個(gè)包含下一篇文章及其資產(chǎn)的網(wǎng)絡(luò)捆綁包。
• 使用服務(wù)工作者攔截導(dǎo)航請(qǐng)求。
• 立即提供捆綁包 - 不需要網(wǎng)絡(luò)。

 //服務(wù)工作者
self.addeventListener（'fetch'，event => {
  const {request} = event;
  if（request.url.endswith（'/next-Article'））{
    event.respondwith（
      caches.match（'Next-Article.wbn'）。然後（bundle => {
        //使用BundledResponse提取正確的資源
        返回捆綁包？新響應(yīng)（bundle.stream，{headers：bundle.headers}）：fetch（request）;
      }）
    ）；
  }
}）;

注意：全瀏覽器支持仍然有限（截至2024年，主要在鍍鉻後面的鍍鉻/邊緣），但是API正在迅速發(fā)展。

挑戰(zhàn)和考慮因素

雖然有希望

• 瀏覽器支持：仍然實(shí)驗(yàn)。在基於鉻的瀏覽器外部不廣泛支持。
• 捆綁創(chuàng)建工具：您需要諸如gen-bundle類(lèi)的工具來(lái)生成.wbn文件。
• 更新粒度：如果一個(gè)資產(chǎn)發(fā)生變化，則可能需要重新包裹所有內(nèi)容（除非使用微分更新）。
• 內(nèi)存和解析頭頂：如果不小心處理，大束可以阻止主線(xiàn)程。

此外，緩存策略需要重新思考。您不能再依靠HTTP緩存來(lái)獲得單個(gè)資源 - 因此，智能服務(wù)工作者邏輯是關(guān)鍵。

底線(xiàn)

Web捆綁包提供了一種有力的方法來(lái)重新考慮我們?nèi)绾畏职l(fā)Web內(nèi)容 - 從許多小請(qǐng)求到更少，更智能，捆綁的交貨。它們尚未準(zhǔn)備好進(jìn)行大規(guī)模生產(chǎn)，但是對(duì)於諸如離線(xiàn)應(yīng)用程序，漸進(jìn)式增強(qiáng)或P2P內(nèi)容共享之類(lèi)的利基用例，它們值得探索。

如果您要構(gòu)建關(guān)鍵性能或具有離線(xiàn)功能的應(yīng)用程序，那麼在更廣泛的支持到達(dá)時(shí)，使用網(wǎng)絡(luò)捆綁包可以使您有所幫助。

基本上：這不是魔術(shù)，但這是邁出更有彈性，更快的網(wǎng)絡(luò)交付的有意義的一步。

以上是Web捆綁包，以進(jìn)行有效的資源分配的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！