webpack4+ 中SplitChunksPlugin的使用 與 異步加載import()

SplitChunksPlugin

從webpack v4開始， CommonsChunkPlugin刪除了，而改為optimization.splitChunks。

只要用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle過大，導致加載時間過長

多入口文件配置

使用對象語法，可以添加多個入口，同時也需要多出口，使用filename: '[name].js' 語法，匹配入口名稱

// 導入處理路徑的模塊
var path = require('path');

module.exports = {
    entry: {//多入口
      index1:'./src/index1.js',
      index2:'./src/index2.js',
    },//應用程序開始執行

    output: { // 配置輸出選項
      path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
      filename: '[name].js' // 配置輸出的文件名,[name]——表示輸出文件名與入口文件一致
    },
  }
打包結果

條件

webpack將根據以下條件自動分割塊：

  • 可以共享新塊，或者模塊來自node_modules文件夾
  • 新的塊將大于30kb（在min + gz之前）
  • 按需加載塊時并行請求的最大數量將小于或等于5
  • 初始頁面加載時并行請求的最大數量將小于或等于3

當試圖滿足最后兩個條件時，最好使用較大的塊。

optimization.splitChunks

配置對象代表的默認行為SplitChunksPlugin

默認的配置:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

可以將此配置與HtmlWebpackPlugin結合使用。它將為您注入所有生成的供應商塊。

  • chunks: 可填 async, initial, all. async
chunks: 'async', //async表示只從異步加載得模塊（動態加載import()）里面進行拆分
chunks: 'ainital',//initial表示只從入口模塊進行拆分
chunks: 'all',//包括async, initial的功能
  • minSize (默認是30000)：形成一個新代碼塊最小的體積
minSize: 30000,
  • maxSize(默認是0) :告訴webpack嘗試將大于大塊的塊拆分maxSize為較小的部分。
maxSize: 0,
  • minChunks: （默認是1）：在分割之前，這個代碼塊最小應該被引用的次數
minChunks: 1,
  • maxAsyncRequests（默認是5）：按需加載時候最大的并行請求數。
maxAsyncRequests: 5,
  • maxInitialRequests（默認是3）：一個入口最大的并行請求數
maxInitialRequests: 3,
  • automaticNameDelimiter：默認情況下，webpack將使用塊的來源和名稱生成名稱（例如vendors~main.js）。此選項使您可以指定用于生成名稱的定界符。
automaticNameDelimiter: '~',
  • name：chunk的名字，如果設成true，會根據被提取的chunk自動生成。
name: true,

name (module, chunks, cacheGroupKey) {
    // 生成塊名稱
    return; //...
}
  • cacheGroups： 這個就是重點了，我們要切割成的每一個新chunk就是一個cache group。
cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10
  },
  default: {
    minChunks: 2,
    priority: -20,
    reuseExistingChunk: true
  }
}
    • test：用來決定提取哪些module，可以接受字符串，正則表達式，或者函數，函數的一個參數為module，第二個參數為引用這個module的chunk(數組).
test(module, chunks) {
    //...
    return module.type === 'javascript/auto';
}
    • priority：一個模塊可以屬于多個緩存組。優化將首選具有較高的緩存組priority。默認組的優先級為負，以允許自定義組獲得更高的優先級（默認值適用0于自定義組）。
    • reuseExistingChunk: 當module未變時，是否可以使用之前的chunk.

注意：

1. minChunks、maxAsyncRequests、maxInitialRequests的值必須設置為大于等于1的數

2. 當chunk沒有名字時，通過splitChunks分出的模塊的名字用id替代，當然也可以通過name屬性自定義

3. splitChunks的配置項都是作用于cacheGroup上的，如果將cacheGroup的默認兩個分組vendor和default設置為false，則splitChunks就不會起作用

4. splitChunks.cacheGroup必須同時滿足各個條件才能生效

5. 當父chunk和子chunk同時引入相同的module時，并不會將其分割出來而是刪除掉子chunk里面共同的module，保留父chunk的module，是因為 optimization.removeAvaliableModules 默認是true

6. 當兩個cacheGroup.priority相同時，先定義的執行

緩存組

一個模塊可以被分配到多個緩存組，優化策略會將模塊分配至跟高優先級別（priority）的緩存組，或者會分配至可以形成更大體積代碼塊的組里。

splitChunks默認有兩個緩存組：vender和default

default緩存組的優先級(priotity)是負數，因此所有自定義緩存組都可以有比它更高優先級

禁用default緩存組：
defalut:false;

緩存組可以繼承和/或覆蓋splitChunks.*;中的任何選項。

若要禁用任何默認緩存組，請將它們設置為false

測試

  1. 創建相關入口文件
//commons.js —— 一個公共組件
export const t = '這是公共文件'

//index1.js —— 入口文件一
import {t} from "./commons.js";//引入公共資源
import Vue from "../vue";//引入第三方庫
new Vue({
    el:"#app",
    data(){
        return{
            msg : t
        }
    }
});

alert(t+'index1');

//index2.js —— 入口文件二
import {t} from "./commons.js";//引入公共資源
import Vue from "../vue";//引入第三方庫
new Vue({
    el:"#app",
    data(){
        return{
            msg : t
        }
    }
});

alert(t+'index2');
  1. 配置文件

默認的東西根據需要修改，然后再添加一些緩存組

注意：要下載插件cnpm i html-webpack-plugin --save-dev，手動引入文件，注意修改配置文件中參照文件的目錄，也可一不下載但是要刪除對應的內容，

例如：

// 導入處理路徑的模塊
var path = require('path');
// 導入自動生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {//多入口
      index2:'./src/index1.js',
      index3:'./src/index2.js',
    },//應用程序開始執行

    output: { // 配置輸出選項
      path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
      filename: '[name].js' // 配置輸出的文件名,[name]——表示輸出文件名與入口文件對象名一致
    },
    plugins:[ // 添加plugins節點配置插件
      new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路徑
            filename:'index.html'//自動生成的HTML文件的名稱
        })
    ],
    optimization: {
      splitChunks: {
        maxInitialRequests:4,//入口最大的并行請求數，默認為3，因為要產生4個文件因此需要修改
        automaticNameDelimiter:'_', 
        minChunks: 2,
        chunks:'all',
        cacheGroups: {
            //待添加緩存組
        }
      }
    }
  }

添加緩存組

// 獲取包含所有被其他入口(entrypoints)共享的代碼。
 common_1:{//緩存組名稱
    name:"commons",//設置分割文件的名字
        //可以不設置，默認會使用緩存組名稱以及其他出口文件名的組合，
        // 使用automaticNameDelimiter聲明的分隔符號分割，默認值為'~',可以修改為其他值
        // 因此文件名：commons_index2_index3.js
},

打包對應的文件目錄


image

分隔出文件commons.js , 其內容包含第三方庫，公共組件，webpack打包組件

// 獲取包含整個應用所有來自node_modules的代碼
          common_2: {
            test: /[\\/]node_modules[\\/]/,
            name: "vender",
          }

打包對應的文件目錄


image

產生兩個文件，index2_index3.js和vender.js

index2_index3.js包含第三方庫，公共組件

vender.js包含webpack打包組件

參考 ：

  1. 理解webpack4.splitChunks

  2. Webpack4之SplitChunksPlugin

  3. SplitChunksPlugin官方文檔

  4. 沒有了CommonsChunkPlugin，咱拿什么來分包（譯）

異步加載


1、System.import()； 已廢除，不推薦

2、require.ensure()； v1和v2均可使用

3、import()；v2支持，v1不支持

import()

function(string path):Promise

動態加載模塊。對的調用import()被視為拆分點，這意味著所請求的模塊及其子級被拆分為單獨的塊。

import('lodash').then(_ => {
    // Do something with lodash (a.k.a '_')...
  })

函數只接受一個參數，就是引用包的地址；此功能在Promise內部依賴

let filename = 'module.js'; 

import('./' + filename). then(module =>{
    console(module);
});

知道 export的函數名或者參數名

import('./' + filename). then(({Name}) =>{
    console(Name);
});

如果使用的是export default function()導出的函數或者參數

import('./' + filename). then(module =>{
    console(module.default);
});

或

import('./' + filename). then(({default:fnName}) =>{
    console(fnName);
});

import()必須包含在模塊位于至少一些信息，捆綁可以限制為特定目錄或文件集，以便在使用動態表達式時- import()包括可能在呼叫中請求的每個模塊。

參數

/* */ 在這不代表著注釋，這些參數以此方式存在并實現自身作用

// Multiple possible targets
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  'ignored-module.js'
);

import(/* webpackIgnore: true */ 'ignored-module.js');

ignored-module.js一個文件的目錄，可以是相對路徑，也可以是絕對路徑

  • webpackIgnore —— 設置為時，禁用動態導入解析true,退出代碼拆分。
webpackIgnore: true

  • webpackChunkName —— 新塊的名稱。在給定的字符串中，占位符[index]和[request]被支持為遞增的數字或實際解析的文件名。

  • webpackMode —— 可以指定用于解決動態導入的不同模式。

    • 'lazy'(默認值) —— 為每個 import() ed模塊生成可延遲加載的塊。
    • 'lazy-once'—— 生成一個可以滿足對的所有調用的可延遲加載的塊import()。該塊將在對的第一次調用時獲取import()，而對的后續調用import()將使用相同的網絡響應。
    • 'eager' —— 不生成額外的塊。所有模塊都包含在當前塊中，并且不發出其他網絡請求。
    • 'weak' —— ：如果已經以其他方式加載了模塊功能（例如，導入了另一個塊或加載了包含該模塊的腳本），則嘗試加載該模塊。

  • webpackPrefetch —— 告訴瀏覽器將來可能需要某種資源來進行某些導航

webpackPrefetch: true
  • webpackPreload —— 告訴瀏覽器在當前導航期間可能需要該資源。
webpackPreload: true
  • webpackInclude —— 在導入解析期間將與之匹配的正則表達式。僅將匹配的模塊捆綁在一起。
webpackInclude: /\.json$/
  • webpackExclude —— 在導入解析期間將與之匹配的正則表達式。匹配的任何模塊都不會捆綁在一起。
webpackExclude: /\.noimport\.json$/

注意：webpackInclude和webpackExclude選項不會干擾前綴

實際操作

  1. 新建文件

這些文件均位于src目錄下

A.js

export let  A = {
    "data" : "this is A"
}

B.js

export let B= {
    "data" : "this is B"
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <button id="aBtn">ABtn</button>
    <br>
    <button id="bBtn">BBtn</button>
</body>
</html>

index.js

console.log("This is main!");
// 獲取依賴

document.getElementById("aBtn").onclick=function(){
    // 異步加載，A.js
    import(/*webpackChunkName:'fileA'*/'./A'). then(({A})=>{
        alert(A.data);
    })
}
document.getElementById("bBtn").onclick=function(){
   // 異步加載，B.js
   import(/*webpackChunkName:'fileB'*/'./B'). then(({B})=>{
        alert(B.data);
    })
};
  1. 下載html-webpack-plugin插件
npm i html-webpack-plugin -D
  1. 配置webpack.conf.js
// 導入處理路徑的模塊
const path = require("path");
// 導入自動生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    "index": "./src/index.js", //應用程序開始執行
  },
  output: {
    path: path.resolve(__dirname, "dist"),// 配置輸出的路徑
    filename: "[name].js",// 配置輸出的文件名,[name]——表示輸出文件名與入口文件對象名一致
    publicPath: './',//動態import文件路徑
    chunkFilename: "[name].chunk.js"http://動態import文件名
  },
  plugins:[ // 添加plugins節點配置插件
    new htmlWebpackPlugin({
        template:path.resolve(__dirname, 'src/index.html'),//模板路徑
        filename:'index.html',//自動生成的HTML文件的名稱
      })
  ],
};
  1. 打包測試

打開dist中的index.html，鼠標右擊檢查，找到NetWork，刷新一下，會出現如下的一些js文件：

image

可以發現這里并沒有生成的fileB.chunk.js和fileA.chunk.js文件，當點擊ABtn按鈕，就會出現對應的fileA.chunk.js文件，很明顯這樣就可以異步加載成功了


image

注意：

  • chunkFilename: "[name].chunk.js" 是給import文件重新命名的，默認情況下按著順序從0.js，1.js，····，
  • 也可以在webpackChunkName:'fileA'進行設置名字

參考：

webpack4利用import動態加載的一些說明

Webpack 按需/異步加載/Code Splitting

webpack官方文檔相關內容

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,837評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,196評論 3贊 414
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,688評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,654評論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,456評論 6贊 406
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,955評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,044評論 3贊 440
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,195評論 0贊 287
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,725評論 1贊 333
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,318評論 5贊 358
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,048評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1贊 281
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2贊 372