用户得到我以前的捆绑包

Question

我的生产网站有问题。

当用户在构建后进入我的网站时，出现白屏。 我在开发工具上看到该网站试图加载旧的bundle.js文件，但我不明白为什么（套现不成功）

Answer 1

这似乎是服务人员正在运行的问题。

服务工作者是用于缓存您的资产和其他文件的API，因此当用户离线或网络速度较慢时，他仍然可以看到您的网站。

React默认情况下无需您的配置即可为您创建服务工作者，因此这是用户进入您的网站并获取您以前的捆绑包的原因。

只需将其放入您的应用中，以便下次用户进入您的网站时，服务工作人员将被终止。

import { unregister } from './registerServiceWorker';

// ....

unregister();

• Service Workers, MDN
• Service Workers, Google Web Fundamentals

Answer 2

假设您正在使用webpack生成构建并希望caching (with service workers)也能正常工作，则可以：

1. 向生成的分发包添加哈希。然后，您的webpack配置可能如下所示：

   {
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: "[name].[chunkhash].js",
       },
   }
   

   Read more about it here。

2. 请勿缓存您的index.html，其中包含<script>个导入的更新的散列命名的捆绑包。

这将使您能够轻松地缓存构建，并且仅在哈希名称中有更新时才获取新的捆绑软件。