webpack4的splitChunksPlugin配置參數詳解---代碼分割 、懶加載以及prefetching 和 preloading

代碼啊分割

• 如果把 一個 應用的 所有代碼 都打包到 一個文件，如果文件過於龐大，首次加載 會非常 緩慢，同時 加載了 沒使用的 模塊，因此 可以把 這些代碼模塊 分割成 單獨一個文件，運行時 再去加載。使用webpack4.x的 splitChunksPlugin插件 可以幫助我們實現代碼分割，替代了 之前的 commonsChunkPlugin插件。

參數詳解

module.exports = {
    mode: 'development',
    // 下面這里是默認值
    entry: {
        // 入口文件名的鍵 main (下面簡稱 入口文件)
        main: './src/index.js'
    },
    output: {
        filename: '[name].bound.js',
        path: path.resolve(__dirname, '../dist'),
    },
    ...
    optimization{
        splitChunks: {
            /**
                1. 三個值 
                    async 僅提取按需載入的module
                    initial 僅提取同步載入的module
                    all 按需、同步都有提取
            */
            chunks: "async",
            // 只有導入的模塊 大於 該值 才會 做代碼分割 （單位字節）
            minSize: 30000,
            // 提取出的新chunk在兩次壓縮之前要小於多少kb，默認為0，即不做限制
            maxSize: 0,
            // 被提取的chunk最少需要被多少chunks共同引入
            minChunks: 1,
            // 按需加載的代碼塊（vendor-chunk）並行請求的數量小於或等於5個
            maxAsyncRequests: 5, 
            // 初始加載的代碼塊，並行請求的數量小於或者等於3個
            maxInitialRequests: 3,
            // 默認命名 連接符
            automaticNameDelimiter: '~',
            /**
                name 為true時，分割文件名為 [緩存組名][連接符][入口文件名].js
                name 為false時，分割文件名為 [模塊id][連接符][入口文件名].js
                如果 緩存組存在 name 屬性時 以緩存組的name屬性為准
            */
            name: true,
            // 緩存組 當符合 代碼分割的 條件時 就會進入 緩存組 把各個模塊進行分組，最后一塊打包
            cacheGroups: {
                // 如果 引入文件 在node_modules 會被打包 這個緩存組(vendors)
                vendors: {
                    // 只分割 node_modules文件夾下的模塊
                    test: /[\\/]node_modules[\\/]/,
                    // 優先級 因為如果 同時滿足 vendors、和default 哪個優先級高 就會打包到哪個緩存組
                    priority: -10
                },
                default: {
                    // 表示這個庫 至少被多少個chunks引入，
                    minChunks: 2,
                    priority: -20,
                    // 如果 這個模塊已經 被分到 vendors組，這里無需在分割 直接引用 分割后的
                    reuseExistingChunk: true
                }
            }
        }
    }    
}    

簡單打包

• 上面的配置 基本不變，只修改一些內容

// math.js 
export default function(){
    console.log('add')
}

// index,js
// 非 node_modules 模塊
import add from './math'
// node_modules 模塊
import axios from 'axios'

add()
axios({})

// 修改配置
minSize: 1, //因為 math.js 文件過小 表示 大於1字節 就做代碼分割
minChunks: 2, // 把它去掉 即不做限制

// 打包結果
default~main.bound.js  221 bytes // math.js 打包文件
default~main.bound.js.map  125 bytes
               index.html  533 bytes
            main.bound.js   1.51 KiB // 入口文件
        main.bound.js.map  109 bytes 
    vendors~main.bound.js   14.7 KiB // axios 打包文件
vendors~main.bound.js.map  125 bytes 

懶加載

• 或者說 按需加載，首次並不會 加載 全部 模塊，這樣可以提高首次響應的人速度。

// index.js 文件替換成這樣 頁面 增加一個按鈕 id為 btn
// 點擊 按鈕 后再去加載 axios
document.querySelector('#btn1').addEventListener('click', function(){
    import('axios').then(() =>{
        console.log('懶加載 axios')
    })
})

結果

prefetching 和 preloading

prefetching

• 當我們 使用 某個功能 再去加載響應的 模塊，無疑也會 消耗一定的性能，如果能做到 當核心 代碼加載完畢，偷偷的去加載 這些暫時還沒用到的 模塊，當使用到該模塊 直接從緩存讀取資源。沒錯 prefetching 可以幫助我們做到。

// index.js 文件替換成這樣 頁面 增加一個按鈕 id為 btn
document.querySelector('#btn1').addEventListener('click', function(){
    import(/* webpackPrefetch: true */'axios').then(() =>{
        console.log('懶加載 axios')
    })
})

結果

preloading

• 把 /* webpackPrefetch: true / 修改為 / webpackPreload: true */，preloading的模塊 與 核心模塊 一起加載，會消耗 首次加載的 性能。而 prefetching 相反。

說明

• 這里面 還有很多 細節問題，只有用多了，才會 注意 里面的 一些問題，有兩個 參數 maxAsyncRequests、maxInitialRequests，雖然說 使用默認 即可，但是理解起來還是有點難，估計要結合webpack的打包原理，下次再總結一下，如有錯誤，懇請多多指教哈。