一文大白話講清楚webpack基本使用——9——預加載之prefetch和preload

1. 建議按文章順序從頭看，一看到底，豁然開朗

• 第一篇：
• 一文大白話講清楚啥是個webpack
• 第二篇：
• 一文大白話講清楚webpack基本使用——1——完成webpack的初步構建
• 第三篇
• 一文大白話講清楚webpack基本使用——2——css相關loader的配置和使用
• 第四篇
• 一文大白話講清楚webpack基本使用——3——圖像相關loader的配置和使用
• 第五篇
• 一文大白話講清楚webpack基本使用——4——vue-loader的配置和使用
• 第六篇
• 一文大白話講清楚webpack基本使用——5——babel的配置和使用
• 第七篇
• 一文大白話講清楚webpack基本使用——6——熱更新及其原理
• 第八篇
• 一文大白話講清楚webpack基本使用——7——代碼分離和懶加載
• 第九篇
• 一文大白話講清楚webpack基本使用——8——開發環境和生產環境的配置和區別
• 然后看本篇，預加載之prefetch和preload

2. preload和prefetch的區別

• 通過翻譯，prefetch是欲拉取；preload也是預加載，說白了都是預加載，那有什么區別呢
• 區別就是相對于誰去預加載，也正因為有相對于誰，所以有有一個優先級的問題
• 相對于誰呢，相對于他們所在的父chunk,
• preload在父chunk加載時，并行開始加載；而prefetch是在父chunk加載完成后，在瀏覽器空閑時才加載
• preload chunk會在父chunk中立即請求，立刻作用；而prefetch會在未來某個時刻作用
• 所以，preload的優先級要比prefetch高。

2. prefetch的使用

• prefetch怎么用呢，通過動態加載時進行魔法注釋
• 我們第八篇文章講懶加載的時候，
• 一文大白話講清楚webpack基本使用——7——代碼分離和懶加載
• 在main.js里面通過 import(‘./modulejs/dynamic.js’).then()動態加載dynamic.js，構建后，瀏覽器先不加載chunkJS，只有點擊了btn之后才加載chunkJS
• 現在我們讓dynamic變成prefetch加載，就是在瀏覽器空閑的時候去加載他。實現的方式是在import時使用魔法注釋

import(/* webpackPrefetch:true */  //這里通過魔法注釋，標明為prefetch'./modulejs/dynamic.js').then(res=>{//通過import動態引入返回的是一個promise對象，then方法里面的res就是我們dynamic.js 里面export出來的對象res.addOnePToBody()
})

• 然后我們重新構建

npm run build

• 我們運行index.html,打開調試器Elements，發現里面多了一個<link rel=“prefetch” as=“script” href='xxx.js">
  

• 說明prefetch方式會議link的方式將js掛載到頁面，然后在瀏覽器空閑的時候進行下載
  

3. preload的使用

• preload的使用方式跟prefetch是一樣的，通過魔法注釋
• 我們直接上代碼

import(/* webpackPreload:true */  //這里通過魔法注釋，標明為preload'./modulejs/dynamic.js').then(res=>{//通過import動態引入返回的是一個promise對象，then方法里面的res就是我們dynamic.js 里面export出來的對象res.addOnePToBody()})

• 更好的驗證效果，我們dynamic.js里面新加一個函數

function sayHello(){console.log('I`m sayHello from dynamic.js loade by preloade')
}

• 然后再main.js里面動態引用引用

import('./modulejs/dynamic.js').then(res=>{//通過import動態引入返回的是一個promise對象，then方法里面的res就是我們dynamic.js 里面export出來的對象res.sayHello()
})

• 然后我們重新構建

npm run build

• 在瀏覽器里面運行index.html，發現dynamic.js的chunkJS直接被加載了
  

** 在實際開發中，我們優先使用prefetch,等待瀏覽器空閑時再預加載**

4. webpackChunkName

• 這個就是給動態導入的chunk取一個別名

• 如果我們output配置filename中包含[name],那么我們就可以通過異步導入的時候制定別名

• 同樣使用魔法注釋來實現

• 我們現在修改output的filename，加入[name]
  

• 然后動態導入dynamic.js的chunkJS時去個別名，叫rename-dynamic

import(/* webpackChunkName:"rename-dynamic" */'./modulejs/dynamic.js').then(res=>{//通過import動態引入返回的是一個promise對象，then方法里面的res就是我們dynamic.js 里面export出來的對象res.sayHello()
})

• 然后我們重新構建

npm run build

• 發現構建的chunkJS已經加上了rename-dynamic前綴
  

• 就是這個道理，在prefetch和preload里面將這個webpackChunkName，是因為都是因為使用魔法注釋