webpack調優技巧

webpack優化主要有三個方面：1.提高構建速度，2.減少打包體積，3.優化用戶體驗

提高構建速度：

1. 啟用多線程
   thread-loader
   使用thread-loader插件可以啟用多線程進行構建。

2. 使用緩存
   cache-loader
   使用cache-loader插件可以對構建進行緩存，加快後續的構建速度。

3. 熱更新
   熱更新只更新改動的代碼文件，無需編譯整個項目。

4. exclude&include
   exclude選項是構建時忽略的文件，include選項是構建時需要構建的文件。配置好exclude和include，可以避免對不必要的文件進行構建。

減少打包體積

1. 壓縮css代碼
   css-minimizer-webpack-plugin

2. 壓縮js代碼
   terser-webpack-plugin

3. tree-shaking
   tree-shaking就是只編譯需要的代碼。
   webpack5該特性預設啟用。

4. source-map
   source-map幫助在源代碼中定位bug。
   開發模式使用更精確但體積更大的source-map

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}

生產模式使用體積小但不那麼精確的source-map

module.exports = {
  mode: 'production',
  devtool: 'nosources-source-map'
}

5. 打包分析
   webpack-bundle-analyzer插件可以看到各個文件的打包大小，幫助對對應的文件進行優化

優化用戶體驗

1. 延遲載入模塊
   在vue中，用下麵箭頭函數的方式引入模塊，就可以按需載入模塊。react的延遲載入和vue類似，angular也有自己的延遲載入方式。

// src/router/index.js
const routes = [
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    // lazy-load
    component: () => import('../views/home/home.vue'),
  },
]

2. Gzip
   最常見的壓縮文件的演算法。可以在網路傳輸中壓縮數據，加快傳輸速度。需要後端的配合。
   插件 compression-webpack-plugin

3. base64
   小圖片可以轉成base64嵌進代碼中，減少http請求數量。
   插件 asset-module

4. hash
   如下配置可以給打包文件加上hash尾碼，生成hash尾碼管理瀏覽器緩存。只要文件名和之前不同，瀏覽器就會向服務端重新請求文件。反之，瀏覽器會從協商緩存中讀取文件。重新部署了項目，文件名稱未修改，客戶端不一定能獲取到最新的代碼。
   webpack會自動更改有改動的打包文件的hash尾碼，可以自動實現文件的緩存管理。

output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/chunk-[contenthash].js',
    clean: true,
    },