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关联对应的模块代码
- c.js 会默认调用window[“webpackJsonp”] || []).push 添加对应的模块代码
