splitchunk（如何将指定文件从主包拆分为单独的js文件）

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关联对应的模块代码