caching Problem mit der web-Anwendung entwickelt, mit reactjs & webpack

Arbeite ich an einer web-Anwendung entwickelt, mit reactjs und webpack. Nach jedem deployment, müssen wir uns Fragen, Benutzern das löschen des browser-cache und starten Ihren Browser. Ich denke, dass die javascript-bundle-Datei und css-Datei immer zwischengespeichert, die auf Benutzer-browser.

Wie können wir die Kraft der browser nicht Cachen, diese Dateien oder laden Sie die neuesten Dateien vom server.

<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>
InformationsquelleAutor OpenStack | 2016-04-07
  1. 7

    Können Sie html-webpack-plugin

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

    hash: true | false wenn true, dann fügen Sie eine einzigartige webpack Zusammenstellung hash zu alles inklusive Skripte und css-Dateien. Dies ist nützlich für die cache-busting.

    • Danke für die schnelle Antwort. Ich erhalte folgende Fehlermeldung Failed to load resource: the server responded with a status of 404 (Not found) für die Datei bundle.js?1c03629db68f03ac936e & ähnliche Fehlermeldung kommt styles.css?1c03629db68f03ac936e - Datei. Ich installierte das npm-Paket und einfache fügte der code angezeigt, die Sie in webapck config-Datei. nach dem Aufbau und der Bereitstellung ich bin immer Fehler. wenn ich die Anwendung lokal bekomme ich folgenden Fehler ncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
    • Stellen Sie sicher, dass die html-Datei generiert aus HtmlWebpackPlugin ist, verweisen auf die Dateien korrekt. Ich weiß nicht, wie du bist-Projekt eingerichtet ist, so könnte es denken, Ihre distributions-Verzeichnis-Struktur anders ist, als es ist.
    • Ich denke, das problem ist, der query-string ist nicht im richtigen format. anstelle von Schlüssel-Wert-paar, die Datei ist nur Wert. damit meine ich statt bundle.js?v=1c03629db68f03ac936e sein kommen als bundle.js?1c03629db68f03ac936e. die key fehlt. Habe vermisse ich eine Konfigurations-option.
    • Es spielt keine Rolle. Ich benutze es und es funktioniert.
    • diese Arbeit mit "webpack" oder brauchen "webpack-dev-server' ?
    • Ich denke, es sollte funktionieren mit nur webpack, es wäre nicht die Vermischung während des build-Prozesses.

    InformationsquelleAutor Jack
  2. 2

    sollten Sie verwenden html-webpack-plugin mit einer template-html-und put-hash-Konfiguration im output. So Ihr webpack config wie folgt Aussehen:

        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 so etwas wie dieses:

    <!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>

    Den HTML-webpack plugin wird automatisch mit einfügen der überarbeiteten Skript in der index.html in Ihrem bundle-Ordner. Hoffe, das hilft. Für die Zwischenspeicherung zu beheben, können Sie sich an https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching wo der Versionierung und der response-header server-Konfigurationen erwähnt, die für wirksame caching-Lösungen.

    InformationsquelleAutor Pranay Tripathi
  3. 1

    Gibt es einen einfachen Weg um dieses problem zu vermeiden, ohne irgendwelche extra Sachen. Verwenden webpack s built-in-hashing-Fähigkeit.

    Lesen Sie über das hinzufügen von hash zu deinem Bündel hier. Während der Titel dieser "Langzeit-caching" es ist nur wahr im Falle, wenn Sie Ihre Dateien nicht ändern. Aber wenn Sie erstellen Sie Ihr bundle Sie erhalten neue, einzigartige hash, also browser würde denken, es ist die neue Datei und laden Sie es.

    • vorausgesetzt, ich bin mit filename: '[hash].bundle.js', in meinem webpack.config-Datei. das erzeugt eine Datei wie diese 3d161aa1fedaca1ca95b.bundle. Nun, wie aktualisiere ich meine index.html Datei, die ist noch darunter bundle.js Datei wie <script src="bundle.js"></script>. Der Artikel sagt auch Note that you need to reference the entry chunk with its hash in your HTML. You may want to extract the hash or the filename from the stats. Bin ich hier etwas fehlt ?
    • Finden Sie die Antwort auf diese im letzten Kapitel webpack.github.io/docs/.... Nach dem erstellen kann man dann in den stats.json zu sehen, dass die eigentliche bundle-name und dann geben Sie auf Ihrer html-Vorlage.
    • Danke für die Antwort. Ich schaute auf die assets-webpack-plugin Sie sagen This plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else. aber ich sehe nicht ein Beispiel, das erläutert, wie Sie sind die Aktualisierung der Referenz-Datei-Namen in index.html
    • Oh, Sie aktualisieren sich nicht index.html. Sollten Sie wahrscheinlich verwenden einige template-engine zu generieren index.html und pass generierten Vermögen, um es als Variablen. Ihre flow: 1. bauen mit webpack und Statistiken.json-2. Lesen Sie Statistiken.json-beim starten des Servers 3. pass rechts wegen-von den stats.json zu html
    InformationsquelleAutor gyzerok
Schreibe einen Kommentar