webpack學習(七) -- 提取公共js代碼

提取公共js代碼

前言

項目中咱們常遇到項目中有多個入口文件的狀況，這時候若是有兩個入口文件引用了相同的模塊，這時候若是咱們沒有作任何處理的話，在打包時就會把這個相同的模塊打包兩次，這樣既影響了性能，又下降了咱們的代碼質量，本文就介紹一種解決該現象的插件，來提取公共的js代碼。

條件

該方法只適用於多入口js文件

優勢

• 減小代碼冗餘
• 提升用戶加載速度

webpack4新特性(splitChunks)

splitChunks替代了以前webpack3的common-chunk-plugin插件

不使用插件時的案例

咱們一樣採用案例說話，小女認爲案例比枯燥的文字易懂，看起來也不是狠枯燥嘛~

• 建立案例文件

src下建立兩個入口文件，一個公共js文件，和兩個依賴公共文件的js文件。他們之間的關係：紅色框裏面是兩個入口文件；藍色框是引入的公共文件；橘色框是兩個都依賴公共文件的js文件

• 在兩個入口文件中分別引入subPageA和subPageB

• 在公共js文件module.js中隨便寫點模塊代碼

• 在subPageA和subPageB中都引入module.js模塊

• 在兩個入口文件中分別引入subPageA和subPageB文件

• 修改webpack配置文件

  • 多入口配置

- 用webpack進行打包，獲得兩個js打包文件
複製代碼

- 能夠看到兩個打包出的文件中都有module模塊出現
複製代碼

這就說明在沒有處理的狀況下，多入口文件引入相同的模塊，打包後會屢次打包相同的模塊

特性使用

• 在導出文件中增長一個公共模塊的js文件

• 配置分離包

optimization: {
    splitChunks: {
        cacheGroups: {
            common: { 
                name: 'common', //分離出的公共模塊的名字，若是沒寫就默認是上一層的名字
                chunks: 'all', //在哪些js範圍內尋找公共模塊，能夠是src下的文件裏，也能夠是node_modules中的js文件
                minSize: 30, //抽離出的包的最小體積，默認30kb
                minChunks:2,
                //當前公共模塊出現的最少次數，
            }
        }
    }
}
複製代碼

下面讓咱們來看看配置後的效果吧

• 執行webpack打包
• 能夠看到打包後的文件中增長了common文件，其餘兩個出口文件中也沒有了公共模塊相關的代碼

分離業務邏輯公共js和第三方庫公共js

項目中嚐嚐須要用到第三方庫,這時候若是把第三方庫和咱們的業務邏輯公共模塊混合在一塊兒，是狠很差的行爲，咱們須要把兩者分離開

方法很簡單，在剛纔的webpack配置的下面再配置一個

optimization: {
    splitChunks: {
        cacheGroups: {
            common: { 
                name: 'common', 
                chunks: 'all', 
                minSize: 30, 
                minChunks:2,
                priority:1, //優先級
            },
            vendor:{
                name: 'vendor',
                test:/[\\/]node_modules[\\/]/, //在node_modules範圍內進行匹配
                priority:10, //優先級，先抽離公共的第三方庫，再抽離業務代碼，值越大優先級越高
                chunks:'all'
            }
        }
    }
}
複製代碼

• 執行webpack
• 打包文件中多出了vender文件

總結

下面是咱們常見的配置屬性

下面包括了幾乎全部的參數