vuecli3項目中webpack4配置（四）懶加載及Prefetch/Preload

懶加載或「按需」加載是優化站點或應用程序的一個好方法。這種實踐基本上涉及到在邏輯斷點處拆分代碼，而後在用戶完成須要新代碼塊的操做後加載它。這會加速應用程序的初始負載，並減輕其總體重量，由於某些塊甚至可能永遠不會加載。懶加載並非webpack纔有的，只不過是webpack支持這種懶加載的編碼方式。

拿官網例子來講：

增長print.js文件

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
+ |- print.js
|- /node_modules
複製代碼

print.js

console.log('The print.js module has loaded! See the network tab in dev tools...');
export default () => {
  console.log('Button Clicked: Here\'s "some text"!'); }; 複製代碼

index.js

import _ from 'lodash';
function component() {
	const element = document.createElement('div');
	const button = document.createElement('button');
	const br = document.createElement('br');
	button.innerHTML = 'Click me and look at the console!';
	element.innerHTML = _.join(['Hello', 'webpack'], ' ');
	element.appendChild(br);
	element.appendChild(button);
	button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
            const print = module.default;
            print();
        });
        return element;
}
document.body.appendChild(component());
複製代碼

打包結果：

Asset       Size      Chunks          Chunk Names
      bundle.js    559 KiB   index  [emitted]  index
     index.html  182 bytes          [emitted]
print.bundle.js  643 bytes   print  [emitted]  print
複製代碼

運行index.html查看Network，只加載了bundle.js文件，點擊按鈕時纔會加載print.bundle.js文件。經過import的語法實現了懶加載。

若是print.bundle.js文件比較大，那麼當咱們點擊按鈕時，會有必定的延遲，這樣雖然首屏加載時間變短了可是影響了用戶體驗，此時咱們能夠用Prefetch來解決這種問題。

Prefetch是告訴瀏覽器這是一個在將來可能使用到的資源。

瀏覽器一般會在空閒狀態取得這些資源，在取得資源以後擱在HTTP緩存以便於實現未來的請求。若是有多個‘預請求提示’則會在瀏覽器空閒時排隊執行。當瀏覽器離開空閒狀態時正好在‘預請求’資源，那麼瀏覽器會取消任何正在進行中的請求（同時會將部分響應數據放置在緩存中，而在Header中繼續使用Content-Range字段 ）並中止處理‘預請求’隊列。 總之:在閒置時獲取資源。

使用Prefetch很簡單，僅在import時增長一條魔法註釋便可：

修改index.js代碼

button.onclick = e => import(/* webpackChunkName: "print", webpackPrefetch: true */ './print').then(module => {
      const print = module.default;
      print();
});
複製代碼

再次打包，打包結果不變，此時從新運行index.html查看Network,發現瀏覽器除了bundle.js文件外還載最後加載了print.bundle.js文件，這個文件是瀏覽器在空閒狀態下加載的。

點擊按鈕，瀏覽器又從新加載了一次print.bundle.js，此次加載是從瀏覽器緩存中獲取的，因此時間較短。

經過這種懶加載+Prefetch的方式就實現了頁面首次加載只須要加載本身所須要的資源，其餘資源在須要時再去獲取的功能，優化了頁面加載速度。在咱們以後的編碼中能夠嘗試使用。

Preload爲當前導航過程當中可能須要資源。

preload指令與prefetch有不少不一樣之處：

preload的塊開始與父塊並行加載。prefetch在父塊完成加載後開始。

preload的塊具備中等優先級，能夠當即下載。瀏覽器空閒時下載prefetch塊。

父塊應當即請求preload的塊。prefetch能夠在未來的任什麼時候候使用。

瀏覽器支持不一樣。