Webpack 部署SPA时如何确保前端的无缝可用性？

我希望这适用于任何使用webpack构建资产/块的web框架，在我的例子中是Vue

我的工作流程是：

发展特色

构建（npm运行构建）

部署（eb部署）

回到1

构建删除所有以前的块，同时添加新块，即

我的模块.1X3DF23.js
my-other-module.9DFdw232.js

如果用户同时在前端而没有刷新页面（SPA，不太可能），并且浏览到一个新的视图，该视图依赖于已擦除的块，那么对于那些丢失的旧资产，他们将获得404

在这之前，我一直在增加一个版本号以及来自服务器的任何XHR请求。如果应用程序注意到更改，它将重新加载自身。但是，如果块中出现404个错误，那么无论如何都不会调用XHR请求

初步想法：

让web应用程序以30秒的间隔ping后端，这将触发版本自动刷新

---

有其他选择吗？

我同意不删除以前的块。我不知道elasticbeanstalk是如何工作的，所以我将向您展示我使用一个好的旧ubuntu服务器的策略

基本上，Vue应用程序中有以下文件夹：

dist -> Contains the content of the built application with npm run build
node_modules
public
src
...

我要做的是创建一个名为

deploy

的新文件夹，因为

dist

文件夹的一个问题是

npm run build

在构建开始时删除

dist

文件夹的内容

使用

deploy

文件夹，您可以随时保存所需的所有数据

因此，在构建项目时，我会将dist文件夹的内容复制到deploy文件夹中，而不会删除以前的块

为了避免

deploy

文件夹干扰git，我将其添加到

.gitignore

注册表中

可以使用bash通过简单的递归粘贴来实现这一点：

cp -R dist/* deploy/

这将把

index.html

页面替换到部署文件夹中，但不会覆盖以前的块

此解决方案的问题：您的

deploy

文件夹可能会变得很大，因为以前的块永远不会被删除

---

此问题的解决方案：编写一个健壮的脚本，在部署应用程序时删除超过1天（或更长）的块。您可以根据文件的创建日期创建脚本。如果你能流利地使用bash，那就用它吧。我个人更喜欢在项目根目录下的

deploy.js

脚本中直接使用node编写这种脚本。

我建议您执行以下操作

考虑一个静态URL资源，您可以如下所示

abc.com/v1/module.123.js

我建议你保持沉默

v1

在生成更新之间使用相同的部分

Webpack将生成一个新的文件名，如下所示

build1:module.123.js

build2:module.234.js

每当module.js的内容在构建之间发生更改时

在生成更新期间，请确保未删除

v1

服务器中的文件夹。您可以合并旧文件夹和新文件夹，而不是进行完全替换。通过这样做，你将两者兼得

模块1.123.js

模块2.234.js

在服务器的v1文件夹中。通过这样做，您将避免SPA中的HTTP404错误

您可以通过另一个进程通知用户生成更新，并要求用户刷新浏览器以获得更改。可以使用

---

您可以每隔6个月左右将V1文件夹更改为V2或其他适合您需要的文件，以清理未使用的文件。

如果您的应用程序是100%静态应用程序，则可以使用AWS S3 bucket。要更新您的应用程序，您只需要更新您的回购协议

aws s3同步--删除/源/命运

---

我们一直在这样做，而且更新正如您所期望的那样是无缝的。

可行的解决方案。我可以设置一个.ebextensions脚本来保存最新的5组块。将再等几天，以防其他人插话，但你是50枚金币的有力竞争者。不确定你是否理解要求。它是关于处理用户可能已加载的视图，该视图引用在部署时被覆盖的块。如果他们还没有重新加载页面，将查询到区块的旧路由，并返回404。不完全是。。。如果已将块配置为在其名称中包含哈希，则浏览器将不会提取新文件，除非此哈希代码已更改/更新。如果您使用cloudFront，它们也有内部缓存，您可以在其中使用。