1. 說明

webpack打包會默認將入口文件引入依賴js打包為一個入口文件，導致這個文件會比較大，頁面首次加載時造成加載時間較長
可通過splitchunk配置相應的規則，對匹配的規則打包為單獨的js,減小入口js的體積

2. 示例

通過正則匹配，會把入口中引入的c.js打包為單獨c.js

• webpack.config.js

const path = require('path');
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, 'dist1'),publicPath: "/dist1/",},optimization: {minimize: false,splitChunks: {minSize: 0,cacheGroups: {cJs: {test: /c\.js$/,  // 通過正則匹配，會把入口中引入的c.js打包為單獨c.js,在html里也需引入c.jsname: 'c',chunks: 'all',priority: 10 // 設置較高的優先級}}}}
}

• index.js

import a from './a.js'
import './cc/c.js'
import './c.js'a()

• a.js

const testArrowFuntion = () => {console.log('this is testArrowFuntion')
}const aSignFuntion = () => {testArrowFuntion()console.log('this is a')
}export default aSignFuntion

• cc/c.js

const getUuid = (len, radix) => {var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')var uuid = []var iradix = radix || chars.lengthif (len) {for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]} else {var ruuid[8] = uuid[13] = uuid[18] = uuid[23] = ''uuid[14] = '4'for (i = 0; i < 36; i++) {if (!uuid[i]) {r = 0 | Math.random() * 16uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]}}}return uuid.join('')
}export {getUuid
}

• c.js

console.log('This is c.js');
window.sunlight = 'ght'

3. 結果展示

• 大包會生成 mains.js、c.js 兩個文件 正常不配置splitchunk情況只會生成一個main.js
  
• main.js中只包含了a.js代碼
  
• c.js 文件包含了 cc/c.js、c.js 兩部分的代碼

【注】
頁面里需要把main.js和c.js都引入

4. main.js里是如何加載 c.js 里的代碼的呢

• mainx.js 會對window[“webpackJsonp”].push進行劫持，在c.js里調用window[“webpackJsonp”].push時，會觸發main.js里的webpackJsonpCallback 回調函數
  
• webpackJsonpCallback 函數里會將依賴的代碼獲取到，并用對應chunkId關聯對應的模塊代碼

• c.js 會默認調用window[“webpackJsonp”] || []).push 添加對應的模塊代碼