问题阐明,批改 dllPlugin 之后,加载网页报错,Cannot read property ‘call’ of undefined。
起因:
以 util.dll.js 为例阐明。
本来编译后会把 lodash 和 dayjs 打包变为 util.dll.js(旧版 util.dll.js)
// webpack.dll.config.js
module.exports = {
…,
entry: {
util: ['lodash', 'dayjs'],
...
}
}
批改 entry 中的 util,新增了一个 exceljs 模块。
// webpack.dll.config.js
module.exports = {
…,
entry: {
util: ['lodash', 'dayjs', 'exceljs'],
...
}
}
编译后会把 lodash、dayjs 以及 exceljs 打包变为 util.dll.js(新版 util.dll.js)
我的项目编译后,应用 exceljs 的中央会指向 util.dll.js。这个时候如果用户浏览器的缓存还在,应用 exceljs 的页面一旦加载,因为缓存的存在,文件指向了旧版的 util.dll.js,旧版的 util.dll.js 中没有 exceljs,就会报错。(Cannot read property ‘call’ of undefined)
解决这个问题的思维是把新版、旧版的 util.dll.js 在文件名上做出辨别。
这样就有两个思路:
1、文件名加 hash。
2、文件名加工夫戳。
第 1 种,走不通。说下实现计划和问题所在。在 output 中加上[hash:8]
// webpack.dll.config.js
module.exports = {
…,
entry: {
util: ['lodash', 'dayjs'],
...
},
output: {
...
filename: '[name].[hash:8].dll.js'
}
}
webpack 能够辨认这种 [hash:8] 通配符,dll 编译后胜利加上了文件名胜利加上了 hash。
(如 /dll/util.2d0b32f5.1aefa32d.js)
然而在 vue.config.js 的导入 dllplugin 过程中,无奈动静的将带 hash 值的 dll 文件名导入。因而这条路走不通。
第 2 种,加工夫戳(加年月日)可行。
首先创立工夫戳,能够通过原生 js 的 Date 对象,也能够通过第三方库,这里以 dayjs 为例。
// webpack.dll.config.js
const dayjs = require(“dayjs”);
const date = dayjs.format(“YYYYMMDD”);
module.exports = {
…,
entry: {
util: ['lodash', 'dayjs'],
...
},
output: {
...
filename: `[name].${date}.dll.js`
}
}
(编译后的 dll 文件名,形如 /dll/util.20220210.js)
在 vue.config.js 中也创立工夫戳(年月日)
// vue.config.js
const dayjs = require(“dayjs”);
const date = dayjs.format(“YYYYMMDD”);
在 fileArr 中,将 filePath 配置项批改
(联合我写的 https://segmentfault.com/a/11… 这篇文章看)
上图红框所指局部的模板字符串,改为dll/${dllName}.${date}.dll.js
完结