webpack系列文章：
- 【Webpack 性能優化系列(9) - 多程序打包】極大的提升項目打包建構速度！！！
- 【Webpack 性能優化系列(8) - PWA】使用漸進式網絡應用程式為我們的項目添加離線體驗
- 【Webpack 性能優化系列(6) - code splitting 】通過代碼分割來擷取更小的 bundle，優化資源加載
- 【Webpack 性能優化系列(5) - tree shaking 】去除未引用代碼，減少代碼體積！！！
- 【Webpack 性能優化系列(4) - 緩存 】詳解如何做bable緩存和檔案資源緩存
- 【Webpack 性能優化系列(3) - oneOf】
- 【Webpack 性能優化系列(2) - source-map】
- 【Webpack 性能優化系列(1) - HMR 熱子產品替換】
- 【Webpack 生産環境配置】近兩萬字長文總結學習如何提取css為單獨檔案、css的壓縮和相容性處理，如何壓縮html和js、如何做js文法檢查eslint和js相容性處理babel！！！
- 【Webpack 開發環境配置】萬字長文總結學習如何打包樣式資源、html資源、圖檔資源和其他資源？devServer是什麼，如何配置？
- 【Webpack 簡介及五個核心概念】
懶加載
懶加載或者按需加載，會在檔案需要使用時才加載，是一種很好的優化網頁或應用的方式。
懶加載的使用加快了應用的初始加載速度，減輕了它的總體體積，因為某些代碼塊可能永遠不會被加載。
project
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<h1>hello lazy loading</h1>
<button id="btn">按鈕</button>
</body>
</html>
test.js
console.log('test.js檔案被加載了~');
export function mul(x, y) {
return x * y;
}
export function count(x, y) {
return x - y;
}
index.js
console.log('index.js檔案被加載了~');
import { mul } from './test';
document.getElementById('btn').onclick = function() {
console.log(mul(4, 5));
};
建構打開項目
可以發現，還沒有點選按鈕，test.js檔案就已經加載了，這是沒有做懶加載的效果
現在對test.js檔案做懶加載：點選按鈕的時候才加載test.js檔案資源
懶加載其實就是用到了
code splitting
文章中動态導入的方法
懶加載寫法：
index.js
console.log('index.js檔案被加載了~');
// import { mul } from './test';
document.getElementById('btn').onclick = function() {
// 懶加載~：當檔案需要使用時才加載~
import(/* webpackChunkName: 'test'*/'./test').then(({ mul }) => {
console.log(mul(4, 5));
});
};
建構結果：
現在的建構結果還有一個test，表示已經做了代碼分割，因為前面已經講到了，懶加載其實就是用到了
code splitting
文章中動态導入的方法
是以懶加載内部實作的前提條件就是先進行代碼分割，先分割成單獨的js檔案，再對這個單獨的js檔案進行懶加載
打開項目：可以明顯的看到，一開始這個test.js檔案并沒有加載
點選按鈕：test.js檔案才被加載
這裡有一個問題，重複點選按鈕會重複加載資源嗎？
不會，資源第一次加載後，第二次及後續就會直接讀取緩存，而不會重複加載資源
預加載
在聲明 import 時，使用webapck的内置指令
就可以對指定資源進行預加載
index.js
console.log('index.js檔案被加載了~');
// import { mul } from './test';
document.getElementById('btn').onclick = function() {
// 預加載 prefetch：會在使用之前，提前加載js檔案
// 正常加載可以認為是并行加載（同一時間加載多個檔案）
// 預加載 prefetch：等其他資源加載完畢，浏覽器空閑了，再偷偷加載資源
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
console.log(mul(4, 5));
});
};
建構結果：
可以發現test.js資源用到了prefetch技術，即預加載
打開頁面看到test.js已經被加載好了，
點選按鈕的時候，讀取的其實是緩存
加載方式的對比
- 正常加載：可以認為是并行加載（同一時間加載多個檔案）
- 懶加載：當檔案需要使用時才加載~
-
預加載 prefetch：會在使用之前，提前加載js檔案
等其他資源加載完畢，浏覽器空閑了，再偷偷加載資源
參考
- https://webpack.docschina.org/guides/lazy-loading/
- https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver