乐趣区

关于前端:Vue-dllPlugin报错问题修复解决缓存问题

问题阐明,批改 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

完结

退出移动版