Node.js 使用React和Node破坏浏览器缓存

我有一个React应用程序，每次我重新部署时，用户都会告诉我他们看不到更改。我要求他们进行硬重置并清除缓存。我想在推送新版本时取消浏览器缓存，以便用户看到更改

我使用react create app最初创建应用程序

我读到你应该在你的网页插件中使用hash:true。我这样做了，现在我看到捆绑的react应用程序现在有一个查询字符串，但现在我得到了错误：

Refused to execute script from 'https://example.com/static/js/main.9b80cc8a.js?76de7bb1d01e56c5fcb0' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled 

该错误包含在节点中。我使用的是express.static

我从以下位置更改了web包：

new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  },
}),

为此：

new HtmlWebpackPlugin({
  hash: true,
  inject: true,
  template: paths.appHtml,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  },
}),

我的节点代码如下所示，我认为这是正确的：

app.use(express.static(path.join(__dirname, 'public')));

公用目录包含生产生成的应用程序

---

更新应用程序时，如何防止此错误并清除浏览器缓存？

我更愿意发表评论，但我没有足够的声誉：p

对于不同类型的应用程序，我们有类似的设置。每次运行构建时，新捆绑包的哈希都会添加到HTML中脚本标记的源中。这是我们的

HtmlWebpackPlugin

配置

新的HtmlWebpackPlugin({
注：错，
哈什：没错，
模板：'../runner.html'，
文件名：“index.html”，
}),

我们的设置之间的主要区别是

inject

在我的设置中设置为false。我们不想将整个

js

构建注入到html中

下面是

。/runner.html

Spec Runner v3.1.0

注意

。这基本上告诉webpack将散列注入页面。这允许我们将更新直接包含到html页面中。当然，您仍然需要担心html页面的缓存时间

---

此外，如果你决定这样做，你需要另一个插件来缩小你的代码。我推荐。文档可以帮助您找到正确的方向

我最终离开了webpack配置，修改了服务人员

我修改了一个函数，以便在有新内容可用时重新加载窗口。您可以提示用户查看他们是否真的想重新加载（window.confirm），但在我的例子中，他们需要更新

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              window.location.reload(true); //**** THIS IS WHAT I CHANGED
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

---

我会给你一些名声；）我使用了CreateReact应用程序，因此网页包构建在我的节点模块中。谢谢：）。此外，我在这里和那里使用了createreact应用程序，当我运行

npm runbuild

时，它会创建一个

/build

目录。问题，您是否创建了自己的网页包文件？不，它在节点模块中随附了自己的网页包文件。它相当全面。如果我想定制它，我想我可以从node_模块中删除它，然后放到root中。CRA还创建了一个服务人员，我最终修改了它以使其正常工作。我很快会发布一个答案。