聊一聊 webpack 中的 preloading 和 Prefetching

提到 Preloading 和 Prefetching 就不得不先說一下代碼分割，通過下面的例子我們來說明為什么需要代碼分割？

// index.js
import _ from 'lodash'; // 假設大小為 1 MB

業務代碼 // 假設大小為 1 MB

在首次訪問時， index.js 檔案的大小為 2 MB，需要加載的大小是 2 MB
業務代碼改變用戶再次訪問時，index.js 的大小為 2 MB，需要加載的大小還是 2 MB

現在進行代碼分割：

// src/index.js 

業務代碼 // 假設大小為 1 MB

// src/lodash.js
import _ from 'lodash';
window._ = _; // 以后在其它檔案中使用 _ 就可以使用 lodash 庫了，

首次訪問時，index.js 1 MB，lodash.js 1 MB ，需要加載的大小是 2 MB，而且此時可以進行并行加載，速度一般會比上面的快，
業務代碼改變用戶再次訪問時，index.js 1 MB，由于 lodash.js 檔案并沒有發生變化，所以無需再次加載，因為瀏覽器的快取中有，所以此次只需加載 1 MB，

從上面的例子可以看出，代碼分割提高了性能，但是第一次訪問的時間并沒有減少多少，webpack 想讓第一次訪問的時候也得到很大的優化，

我們先從 webpack 中的 SplitChunkPlugin 的默認配置中找到答案，

optimazition: {
  splitChunks: {
    chunks: 'async', // 異步代碼才會進行代碼分割
    ...
  }
}

我們可以看到，chunks 的配置是 async ，只有當異步時才會進行代碼分割，

webpack 為什么要這樣默認設定呢？

還是從下面的例子來說明：

創建一個div元素，并在頁面上顯示出來，

// index.js
document.addEventListener('click', () => {
  const div = document.createElement('div');
  div.innerHTML = 'hello webpack';
  document.body.appendChild(div);
});

思考上面的代碼寫的有問題嗎？還有優化的空間嗎？

現在我們將上面的代碼打包在瀏覽器中運行，在瀏覽器中按 Ctrl + Shift + P ，然后在彈出的對話框中輸入 coverage ，點擊回車，然后再點擊下面的小黑原點，小黑圓點變成紅圓點之后，重繪頁面，會出現下圖所示的頁面：

coverage example

從紅色的方框中可以看出當前加載的檔案中在當前頁面中的利用率為 74.6% ，

仔細分析一下上面的代碼，在回呼函式中的下面三行代碼只有在點擊頁面之后才會有用，因此加載頁面時沒必要加載它們，

const div = document.createElement('div');
div.innerHTML = 'hello webpack';
document.body.appendChild(div);

現在我們換一種寫法，將它們異步加載進來，現在新建一個 click 檔案：

// click.js
function handleClick() {
  const div = document.createElement('div');
  div.innerHTML = 'hello webpack';
  document.body.appendChild(div);
}

export default handleClick;

然后改寫 index.js 檔案：

document.addEventListener('click', () => {
  import('./click.js').then(({default: func}) => {
    func();
  })
});

這時候將異步代碼寫在一個單獨的檔案中，只有當點擊頁面時才會去加載 click.js 這個檔案，

現在再看此時的代碼利用率為 75% 有了一點提升，設想如果異步加載在的代碼比較大的話，提升的會比較多，

改變代碼后coverage

現在我們就看出來 webopack 為什么要使用 chunks: 'async' 這樣的默認配置了，

webpack 優化的側重點是代碼的使用率而不是快取，只是使用快取的方式來優化意義是不大的，通過異步的方式提高代碼的利用率才能比較大程度地提高網站的性能，

這也是為什么老提倡寫異步代碼的原因，

現在又有一個問題，只有當用戶點擊頁面時才會加載 click.js這個檔案，那么如果這個檔案很大，那加載的時間也會很長呀，用戶體驗也不高呀，

那這個問題應該如何解決呢？

有些小伙伴可能會想，能不能在加載完頁面網路空閑的時候先把這些檔案加載進來呀，真聰明，這就是接下來要講的 Preloading 和 Prefetching，

Prefetching

使用方法也比較簡單，就是在要異步加載的檔案前面加上 /* webpackPrefetch: true */ 這個 magic comment 即可，
```
document.addEventListener('click', () => {
  import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
    func();
  })
});
```
上圖中的 0.js 是 click.js 打包之后，可以看出在頁面加載完之后的空閑時間還沒有點擊頁面時已經加載了 0.js ，當點擊頁面時，0.js 直接從快取中讀取，因此耗時非常短，
Preloading 和 Prefetching 有什么區別？

兩者的最大區別在于，Prefetching 是在核心代碼加載完成之后帶寬空閑的時候再去加載，而 Preloading 是和核心代碼檔案一起去加載的，

因此，使用 Prefetching 的方式去加載異步檔案更合適一些，不過要注意瀏覽器的兼容性問題，

完，如有不恰當之處，歡迎指正哦，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/161058.html

標籤：JavaScript

上一篇：松軟科技課堂:JS HTML DOM

下一篇：我了解的前端史