关于一个按需引入的疑问

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 795 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在前端这边很多采用按需引用模块

但是这样其它模块的资源就没被加载到

如果这时发布了新版本

用户又没刷新页面

并点击了其它模块

这时可能就遇到其它模块的资源文件 404

从而加载失败

目前公司微前端的子系统是 vite 项目

最近和测试在扯这个问题

也做了些优化

监听如果是要加载 js 文件却加载了 html

就提示用户刷新页面

模块

vite

页面

刷新

20 条回复 • 2022-10-21 18:18:39 +08:00

chenluo0429

2022-10-20 20:26:50 +08:00

线上环境有 CDN ，没有预热就再次更新版本的概率不高，真的命中也没办法，为这种 edge case 做优化总感觉怪怪的

chenluo0429

2022-10-20 20:27:37 +08:00

真的有需要我们也会向客户端推送事件，触发客户端自刷新的

icySoda

2022-10-20 20:35:01 +08:00 via iPhone

为什么会 404 ，难道不是加载到上一个版本的 js 文件吗？

caisanli

2022-10-20 20:39:48 +08:00

@chenluo0429 自刷新有点突兀，想着有提示会好些。主要是测试阶段更新很频繁。突然想到应该存一份旧的包在那里...好像也解决不了根本问题

caisanli

2022-10-20 20:40:57 +08:00

@icySoda 上一个版本的 js 已经被新的替换了浏览器也没有缓存所以会 404

rabbbit

2022-10-20 20:43:31 +08:00

加配置让生成的 js 文件名带 hash
然后旧的 js 文件不要删

caisanli

2022-10-20 20:46:45 +08:00

@rabbbit 默认都会加 hash 。旧的包不删倒是能解决，只是发版多了后就会有占空间(虽然不多)。

rabbbit

2022-10-20 20:51:12 +08:00

留着没啥问题，实在讨厌可以隔几年再删。
很多后端也不会清理冗余文件，这些东西才更占地方。

caisanli

2022-10-20 20:54:51 +08:00

@rabbbit 哈哈哈可以和运维商量一下

icySoda

2022-10-20 21:06:28 +08:00 via iPhone

@caisanli 为啥要删，就这点文件体积，积累到公司倒闭都没多少空间。

aaronlam

2022-10-20 21:07:28 +08:00

一般会采取增量发布的方式的啊，肯定不会直接把上一版本的直接干掉把。而且资源 hash 是文件名的一部分

aaronlam

2022-10-20 21:08:55 +08:00

@caisanli

相比于线上用户用着用着报错，这点占用真的不算什么吧，而且可以采取半年一清的方式来清楚旧的资源。

caisanli

2022-10-20 21:21:54 +08:00 via iPhone

@aaronlam
@icySoda
焕然大悟！🤣🤣🤣我们现在测试和生产部署都是干掉之前的包，明天和运维商量下。

aaronlam

2022-10-20 21:24:53 +08:00

@caisanli

是时候祭出这个文章了，https://www.zhihu.com/question/20790576/answer/32602154

jarven123

2022-10-21 10:28:43 +08:00

我们为了让用户尽快使用新版，会在打包的时候生成一个 json 记录当前的版本信息，并且在 html 打上标记，然后每次切换路由的时候拿当前 html 标记的版本和生成的 json 中的版本信息对比，如果需要更新就直接 reload 页面

caisanli

2022-10-21 11:33:51 +08:00 via iPhone

@jarven123 这样会写兼容代码而且不一定是路由一个弹窗组件也会引起

jarven123

2022-10-21 14:40:32 +08:00

@caisanli 那就上 CDN 缓存就好了

daysv

2022-10-21 15:51:13 +08:00

这有啥的, 每次打包资源名称都是根据内容的 hash 值, 发版本先发资源, 后发 index.html.
发版不删除, 无脑覆盖.
over

daysv

2022-10-21 15:52:22 +08:00

```js
router.onError((error) => {
const isChunkLoadFailed = /Loading (\w| )*?chunk (\d)+ failed/.test(error.message)
if (isChunkLoadFailed) {
window.location.reload()
}
})
```
我这还写过一个粗暴的代码在懒加载路由里, 虽然现在没啥用.

bebop

2022-10-21 18:18:39 +08:00

加版本号