wake-up-neo.com

caching-Problem mit der Web-Anwendung, die mit Reaktjs und Webpack entwickelt wurde

Ich arbeite an einer Web-Anwendung, die mithilfe von REIXJS und WEBPACK entwickelt wurde. Nach jeder Bereitstellung müssen wir die Benutzer bitten, den Browser-Cache zu löschen und ihre Browser neu zu starten. Ich denke, dass die Javascript-Bundle-Datei und die CSS-Datei beide im Browser des Benutzers abgelegt werden. 

Wie können wir den Browser zwingen, diese Dateien nicht im Cache zu speichern oder die neuesten Dateien vom Server herunterzuladen.

<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
            <link rel="stylesheet" href="styles.css" media="screen" charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>
javascriptcachingreactjswebpack
11
OpenStack

Sie können html-webpack-plugin verwenden

plugins: [
    new HtmlWebpackPlugin({
        hash: true
    })
]

hash: wahr | false Wenn "true", wird ein eindeutiger Webpack-Kompilierungshash an alle enthaltenen Skripts und CSS-Dateien angehängt. Dies ist nützlich für das Busting von Cache.

7
Jack

sie sollten html-webpack-plugin mit einer HTML-Vorlage verwenden und die Hash-Konfiguration in die Ausgabe einfügen. Ihre Webpack-Konfiguration sieht also ungefähr so ​​aus:

    output: {
        filename: "[name].[hash].js",
        path: <path to your bundle folder>
      }
     new HTMLWebpackPlugin({
          hash: true,
          template: paths.resolveFromRoot("src/index.html") //where you want the sample template to be
        })

Und Ihre index.html wird ungefähr so ​​aussehen:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Das HTML-Webpack-Plugin fügt das überarbeitete Skript automatisch in die im Bundle-Ordner erstellte Datei index.html ein. Hoffe das hilft. Informationen zum Caching-Fix finden Sie unter https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching - , wobei für effektive Cachelösungen Konfigurationen für Versions- und Serverantwortheader genannt werden.

1
Pranay Tripathi

Es gibt eine einfache Möglichkeit, dieses Problem ohne zusätzliches Material zu vermeiden. Verwenden Sie die integrierte Hashfunktion des Webpacks.

Sie können lesen, wie Sie Ihrem Bündel Hash hinzufügen - hier . Während der Titel "Langzeit-Zwischenspeicherung" lautet, gilt dies nur für den Fall, dass sich Ihre Dateien nicht ändern. Wenn Sie Ihr Bundle jedoch neu erstellen, erhalten Sie einen neuen eindeutigen Hashwert. Der Browser würde sich also für eine neue Datei halten und sie herunterladen.

1
gyzerok