概述

使用webpack進行打包時，會生成預設的入口檔案chunk、chunk-common、default包。這些chunk包會隨著專案的不斷增大而增大， 有時我們只修改一行程式碼就需要重新構建所有包，並且頁面也無法做到按需載入(chunk包)，首頁就需要載入到所有(chunk包)。 我們可以通過配置optimization(優化模組)中的splitChunks(分割chunk模組)進行優化，將需要按需載入的模組進行單獨打包。

檔案中按需引入模組的幾種方法

• require.ensure --commonjs

require.ensure([], () => r(require('../img/react.png')), 'yourChunkName');
 

• import() --webpack

import(/* webpackChunkName: "yourChunkName" */ '../img/vue.jpg');

分割chunk包的配置說明

• cacheGroups會預設有兩個分割配置
• 其它配置可以參考官方文件

// 預設配置
module.exports = {
   optimization: {
      splitChunks: {
            cacheGroups: {
                vendors: {
                    name: 'chunk-vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: 'initial'
                },
                common: {
                    name: 'chunk-common',
                    minChunks: 2,
                    priority: -20,
                    chunks: 'initial',
                    reuseExistingChunk: true
                }
            }
        }
   }
}
 

打包時涉及到的變數說明

• chunkId: 打包時用於區分不同chunk的標記 預設為 自增
• chunkName: 各個chunk配置的名稱
• hash: 打包時生成的hash 每次打包 都會變化 用以區分每次打包
• contenthash: 根據打包生成的檔案內容生成hash 內容不變 contenthash就不會變
• chunkhash: 不同入口的hash值 用於區分入口 但是同一入口任何檔案變化 就會重新生成

chunk打包快取優化

如果我們修改部分程式碼，只重新生成對應的chunk包，這樣頁面載入chunk時就可以直接使用快取了。實現需要修改以下幾個部分：

• 修改chunkName的命名方式為 'js/[name].[contenthash:8].js'， 讓hash值隨chunk內容變化
• 設定runtimeChunk為true, 分離出入口chunk包的載入和解析邏輯，提取出自執行函式中的模組呼叫邏輯
• 使用外掛 MiniCssExtractPlugin 分割css chunk塊
• 使用外掛 NamedChunksPlugin 修改chunkId為chunkName 來進行chunk進行打包標記（否則新增或刪除某個模組時，所有模組的id都會變化）
• ...

備註

• 具體程式碼就不展示了
• 至於優化詳細步驟，在網上都可以搜到或者在我的git專案中檢視