web-dev-qa-db-ja.com

reactjsとwebpackを使用して開発されたWebアプリケーションのキャッシュの問題

私はreactjsとwebpackを使用して開発されたwebアプリケーションに取り組んでいます。すべての展開後、ユーザーにブラウザーキャッシュをクリアしてブラウザーを再起動するように依頼する必要があります。 JavaScriptバンドルファイルとcssファイルの両方がユーザーのブラウザーにキャッシュされていると思います。

これらのファイルをキャッシュしないように強制したり、サーバーから最新のファイルをダウンロードさせたりするにはどうすればよいですか。

<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

html-webpack-plugin を使用できます

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

ハッシュ：true | trueの場合はfalse、含まれているすべてのスクリプトとcssファイルに一意のwebpackコンパイルハッシュを追加します。これは、キャッシュの無効化に役立ちます。

7
Jack

テンプレートhtmlでhtml-webpack-pluginを使用し、ハッシュ構成を出力に含める必要があります。したがって、webpack構成は次のようになります。

    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
        })

そして、あなたのindex.htmlはこのようなものになります：

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

HTML webpackプラグインは、バンドルフォルダーに作成されたindex.htmlに変更されたスクリプトを自動的に挿入します。お役に立てれば。キャッシュの修正については、 https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching を参照してください。ここでは、バージョン管理とサーバー応答ヘッダーの構成が効果的であると述べていますキャッシングソリューション。

2
Pranay Tripathi

余計なことをせずにこの問題を回避する簡単な方法があります。 webpackの組み込みハッシュ機能を使用します。

バンドルにハッシュを追加することについて読むことができます ここ 。このタイトルは「長期キャッシュ」ですが、ファイルが変更されない場合にのみ当てはまります。しかし、バンドルを再構築すると、新しい一意のハッシュが取得されるので、ブラウザーはそれを新しいファイルと見なしてダウンロードします。

1
gyzerok