web-dev-qa-db-fra.com

problème de mise en cache avec une application Web développée à l’aide de reactjs et de Webpack

Je travaille sur une application Web développée à l'aide de reactjs et de Webpack. Après chaque déploiement, nous devons demander aux utilisateurs d'effacer le cache du navigateur et de le redémarrer. Je pense que les fichiers javascript et css sont tous deux mis en cache sur le navigateur de l'utilisateur. 

Comment pouvons-nous forcer le navigateur à ne pas mettre ces fichiers en cache ou à télécharger les derniers fichiers à partir du serveur?.

<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

Vous pouvez utiliser html-webpack-plugin

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

hash: true | false si true, ajoutez ensuite un hachage de compilation webpack unique à tous les scripts et fichiers css inclus. Ceci est utile pour contourner le cache.

7
Jack

vous devriez utiliser html-webpack-plugin avec un template html et mettre la configuration de hachage en sortie. Ainsi, votre configuration Webpack ressemblera à quelque chose comme ceci:

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

Et votre index.html ressemblera à ceci:

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

Le plugin HTML webpack insérera automatiquement le script révisé dans le fichier index.html créé dans votre dossier de bundles. J'espère que cela t'aides. Pour la correction de la mise en cache, vous pouvez vous référer à https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching où les configurations d'en-tête de version et de réponse du serveur sont mentionnées pour des solutions de mise en cache efficaces.

1
Pranay Tripathi

Il existe un moyen simple d’éviter ce problème sans matériel supplémentaire. Utilisez la capacité de hachage intégrée de webpack.

Vous pouvez en savoir plus sur l’ajout de hash à votre paquet ici . Bien que le titre de ceci soit "Mise en cache à long terme", ce n'est vrai que dans le cas où vos fichiers ne changent pas. Mais si vous reconstruisez votre ensemble, il obtiendra un nouveau hachage unique, de sorte que le navigateur penserait qu'il s'agit d'un nouveau fichier et le téléchargera.

1
gyzerok