在 Docker中部署我的应用程序的新版本后,
我看到console
以下错误会破坏我的应用程序:
Uncaught SyntaxError: Unexpected token '<'
在此屏幕截图中,缺少的源称为:10.bbfbcd9d.chunk.js
,该文件的内容如下所示:
(this.webpackJsonp=this.webpackJsonp||[]).push([[10],{1062:function(e,t,n){"use strict";var r=n(182);n.d(t,"a",(function(){return r.a}))},1063:function(e,t,n){var ...{source:Z[De],resizeMode:"cover",style:[Y.fixed,{zIndex:-1}]})))}))}}]);
//# sourceMappingURL=10.859374a0.chunk.js.map
发生此错误是因为:
- 在每个版本中,我们都会构建一个仅包含最新版本的块
Docker
的新图像 - 一些客户端正在运行一个过时的版本,并且由于(1) ,服务器将无法解决旧块
块是
.js
由 生成的文件,有关更多信息webpack
,请参阅代码拆分
重新加载应用程序会将版本更新到最新版本,但对于所有使用过时版本的用户,它仍然会破坏应用程序。
我尝试过的一个可能的解决方法是刷新应用程序。如果服务器上缺少请求的块,如果对.js
文件的请求以通配符路由结束,我将发送重新加载信号。
通配符服务于
index.html
Web 应用程序,用于在用户刷新其页面的情况下将路由委托给客户端路由
// Handles any requests that don't match the ones above
app.get('*', (req, res) => {
// prevent old version to download a missing old chunk and force application reload
if (req.url.slice(-3) === '.js') {
return res.send(`window.location.reload(true)`);
}
return res.sendFile(join(__dirname, '../web-build/index.html'));
});
这似乎是一个糟糕的修复,尤其是在 Android 版 Google Chrome 上,我看到我的应用程序在无限循环中刷新。(是的,这也是一个丑陋的修复!)
由于它对我的最终用户来说不是一个可靠的解决方案,因此我正在寻找另一种方法来在用户客户端过时时重新加载应用程序。
我的 Web 应用程序是使用 构建webpack
的,就像它是一个create-react-app
应用程序一样,分布式构建目录包含许多.js
块文件。
这些是我在 webpack issue tracker 上获得的一些可能的修复,一些是由 webpack 创建者自己提供的:
- 不要删除旧版本。 <= 我正在构建一个 Docker 映像,所以这有点挑战性
- 捕获
import()
错误并重新加载。您也可以通过在__webpack_load_chunk__
某处打补丁来全局执行此操作。 <= 我没有得到那个补丁或在哪里使用import()
,我不是自己制作这些块,它只是一个生产功能 - 让服务器发送
window.location.reload(true)
不存在的 js 文件,但这是一个非常奇怪的 hack。 <= 它使我的应用程序在 chrome android 上循环重新加载 - 不要为
.js
请求发送 HTML,即使它们不存在,这只会导致奇怪的错误 <= 这不能解决我的问题
相关问题
如何实施可以防止此错误的解决方案?