webpack 中,webpackPrefetch、webpackPreload 和 webpackChunkName 的區別是什麼?

来源:https://www.cnblogs.com/skychx/archive/2020/05/18/webpack-webpackChunkName-webpackPreload-webpackPreload.html
-Advertisement-
Play Games

`webpackChunkName` 是為預載入的文件取別名,`webpackPrefetch` 會在瀏覽器閑置下載文件,`webpackPreload` 會在父 chunk 載入時並行下載文件。 ...


Webpack 有非常多的概念,很多名詞長得都差不多。我把這些分散在文檔和教程里的內容總結起來,寫了一份 webpack 中的易混淆知識點,目前看是全網獨一份,大家可以加個收藏,方便以後檢索和學習。

全集鏈接 ➡️ webpack 易混淆知識點

這幾個名詞其實都是 webpack 魔法註釋(magic comments)里的,文檔中說了 6 個配置,配置都可以組合起來用。我們說說最常用的三個配置。

3.1 webpackChunkName

前面舉了個非同步載入 lodash 的例子,我們最後把 output.chunkFilename 寫死成 bundle.js。在我們的業務代碼中,不可能只非同步載入一個文件,所以寫死肯定是不行的,但是寫成 [name].bundle.js 時,打包的文件又是意義不明、辨識度不高的 chunk id

{
    entry: {
        index: "../src/index.js"
    },
    output: {
        filename: "[name].min.js",  // index.min.js
        chunkFilename: '[name].bundle.js', // 1.bundle.js,chunk id 為 1,辨識度不高
    }
}

這時候 webpackChunkName 就可以派上用場了。我們可以在 import 文件時,在 import 里以註釋的形式為 chunk 文件取別名:

async function getAsyncComponent() {
    var element = document.createElement('div');
  
    // 在 import 的括弧里 加註釋 /* webpackChunkName: "lodash" */ ,為引入的文件取別名
    const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');

    element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');

    return element;
}

這時候打包生成的文件是這樣的:

現在問題來了,lodash 是我們取的名字,按道理來說應該生成 lodash.bundle.js 啊,前面的 vendors~ 是什麼玩意?

其實 webpack 懶載入是用內置的一個插件 SplitChunksPlugin 實現的,這個插件裡面有些預設配置項,比如說 automaticNameDelimiter,預設的分割符就是 ~,所以最後的文件名才會出現這個符號,這塊兒內容我就不引申了,感興趣的同學可以自己研究一下。

3.2 webpackPrefetch 和 webpackPreload

這兩個配置一個叫預拉取(Preload),一個叫預載入(Prefetch),兩者有些細微的不同,我們先說說 webpackPreload

在上面的懶載入代碼里,我們是點擊按鈕時,才會觸發非同步載入 lodash 的動作,這時候會動態的生成一個 script 標簽,載入到 head 頭裡:

如果我們 import 的時候添加 webpackPrefetch

...

const { default: _ } = await import(/* webpackChunkName: "lodash" */ /* webpackPrefetch: true */ 'lodash');

...

就會以 <link rel="prefetch" as="script"> 的形式預拉取 lodash 代碼:

這個非同步載入的代碼不需要手動點擊 button 觸發,webpack 會在父 chunk 完成載入後,閑時載入 lodash 文件。

webpackPreload 是預載入當前導航下可能需要資源,他和 webpackPrefetch 的主要區別是:

  • preload chunk 會在父 chunk 載入時,以並行方式開始載入。prefetch chunk 會在父 chunk 載入結束後開始載入。
  • preload chunk 具有中等優先順序,並立即下載。prefetch chunk 在瀏覽器閑置時下載。
  • preload chunk 會在父 chunk 中立即請求,用於當下時刻。prefetch chunk 會用於未來的某個時刻

3.3 一句話總結:

webpackChunkName 是為預載入的文件取別名,webpackPrefetch 會在瀏覽器閑置下載文件,webpackPreload 會在父 chunk 載入時並行下載文件。




最後推薦一下我的個人公眾號:「滷蛋實驗室」,平時會分享一些前端技術和數據分析的內容,大家感興趣的話可以關註一波:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • KafkaCenter是什麼 KafkaCenter是一個針對Kafka的一站式,解決方案。用於Kafka集群的維護與管理,生產者和消費者的監控,以及Kafka部分生態組件的使用。 對於Kafka的平臺化,一直缺少一個成熟的解決方案,之前比較流行的kafka監控方案,如kafka manager提供 ...
  • 新聞 1. "6分鐘完整視頻提前看光谷歌新機Pixel 4a" 1. "統一推送官方解讀:消滅Android毒瘤、待機續航猛增43%" 1. "Google Play細化搜索結果:可按評分、編輯推薦、最新上線過濾" 教程 1. "瞭解一下,Android 10中的ART虛擬機(6)" 1. "使用 ...
  • 我們知道canvas畫布可以很方便的js原生支持轉為圖片格式並下載,但是svg矢量圖形則並沒有這方面原生的支持。研究過HighChart的svg圖形的圖片下載機制,其實現原理大體是瀏覽器端收集SVG代碼信息,併發送到到伺服器端,由後端程式轉換成圖片格式後,以流的形式反射給瀏覽器端下載。 最近在項目中 ...
  • 【目錄】 一、BOM操作 1、window 對象 2、window 子對象 3、history 對象 4、location 對象(掌握) 5、彈出框 6、計時器相關 二、DOM操作 1、DOM相關概念 2、查找標簽 3、節點操作 4、獲取值操作 5、class、css操作 (以下是使用mac筆記本中 ...
  • 如果大家看過一些 webpack4 優化的文章,一定會出現 dll 動態鏈接庫。它以配置之複雜讓眾多初學者記憶猶新。今天我會以一個學習者的角度去一步一步探討 webpack dll 的配置,最後得出一個完美的解決方案。 ...
  • 在 React Native 開發中,最容易遇到的對性能有一定要求場景就是長列表了。在日常業務實踐中,優化做好後,千條數據渲染還是沒啥問題的。 ...
  • sourse-map ,裡面都有個 map 了,肯定是映射的意思。sourse-map 就是一份源碼和轉換後代碼的映射文件。 ...
  • hash 計算與整個項目的構建相關;chunkhash 計算與同一 chunk 內容相關;contenthash 計算與文件內容本身相關。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...