webpack提取公共代碼optimization介紹

minimize
如果mode是production類型,minimize的默認(rèn)值是true,執(zhí)行默認(rèn)壓縮,

minimizer
當(dāng)然如果想使用第三方的壓縮插件也可以在optimization.minimizer的數(shù)組列表中進(jìn)行配置

SplitChunksPlugin

    chunks: "async”,//默認(rèn)作用于異步chunk,值為all/initial/async/function(chunk),值為function時(shí)第一個(gè)參數(shù)為遍歷所有入口chunk時(shí)的chunk模塊,chunk._modules為chunk所有依賴的模塊,通過chunk的名字和所有依賴模塊的resource可以自由配置,會(huì)抽取所有滿足條件chunk的公有模塊,以及模塊的所有依賴模塊,包括css
    minSize: 30000,  //表示在壓縮前的最小模塊大小,默認(rèn)值是30kb
    minChunks: 1,  // 表示被引用次數(shù),默認(rèn)為1;
    maxAsyncRequests: 5,  //所有異步請(qǐng)求不得超過5個(gè)
    maxInitialRequests: 3,  //初始話并行請(qǐng)求不得超過3個(gè)
   automaticNameDelimiter:'~',//名稱分隔符,默認(rèn)是~
    name: true,  //打包后的名稱,默認(rèn)是chunk的名字通過分隔符(默認(rèn)是~)分隔
    cacheGroups: { //設(shè)置緩存組用來抽取滿足不同規(guī)則的chunk,下面以生成common為例
       common: {
         name: 'common',  //抽取的chunk的名字
         chunks(chunk) { //同外層的參數(shù)配置,覆蓋外層的chunks,以chunk為維度進(jìn)行抽取
         },
         test(module, chunks) {  //可以為字符串,正則表達(dá)式,函數(shù),以module為維度進(jìn)行抽取,只要是滿足條件的module都會(huì)被抽取到該common的chunk中,為函數(shù)時(shí)第一個(gè)參數(shù)是遍歷到的每一個(gè)模塊,第二個(gè)參數(shù)是每一個(gè)引用到該模塊的chunks數(shù)組。自己嘗試過程中發(fā)現(xiàn)不能提取出css,待進(jìn)一步驗(yàn)證。
         },
        priority: 10,  //優(yōu)先級(jí),一個(gè)chunk很可能滿足多個(gè)緩存組,會(huì)被抽取到優(yōu)先級(jí)高的緩存組中
       minChunks: 2,  //最少被幾個(gè)chunk引用
       reuseExistingChunk: true,//  如果該chunk中引用了已經(jīng)被抽取的chunk,直接引用該chunk,不會(huì)重復(fù)打包代碼
       enforce: true  // 如果cacheGroup中沒有設(shè)置minSize,則據(jù)此判斷是否使用上層的minSize,true:則使用0,false:使用上層minSize
       }
    }
}

chunks: 表示顯示塊的范圍,有三個(gè)可選值:initial(初始?jí)K)、async(按需加載塊)、all(全部塊),默認(rèn)為all;
minSize: 表示在壓縮前的最小模塊大小,默認(rèn)是30kb;
minChunks: 表示被引用次數(shù),默認(rèn)為1;
maxAsyncRequests: 最大的按需(異步)加載次數(shù),默認(rèn)為1;
maxInitialRequests: 最大的初始化加載次數(shù),默認(rèn)為1;
name: 拆分出來塊的名字(Chunk Names),默認(rèn)由塊名和hash值自動(dòng)生成,如果是true,將自動(dòng)生成基于塊和緩存組鍵的名稱。如果是字符串或函數(shù)將允許您使用自定義名稱。如果名稱與入口點(diǎn)名稱匹配,則入口點(diǎn)將被刪除。
automaticNameDelimiter:'',名稱分隔符,默認(rèn)是
cacheGroups: 緩存組。

runtimeChunk
將包含chunks 映射關(guān)系的 list單獨(dú)從 app.js里提取出來,因?yàn)槊恳粋€(gè) chunk 的 id 基本都是基于內(nèi)容 hash 出來的,所以你每次改動(dòng)都會(huì)影響它,如果不將它提取出來的話,等于app.js每次都會(huì)改變。緩存就失效了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容