When a new build is deployed, some of the older code is updating due to cache (or some other unknown) issue. i have configured the webpack.config.js file as below by referring the internet.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[contenthash].js",
publicPath: "/",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
// Add any additional loaders for other file types
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
// Add any other plugins you need
],
// Add any necessary optimizations or other configuration options
};
index.html
<!-- adding for cache issues -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Kindly help with any correction to the above code, or any new other alternative solutions.
This is a urgent requirement
Top comments (3)
Setting
Cache-Controltono-cacheis the right approach, but it's in the wrong place. Or not the wrong place: It just covers the cache settings of the HTML page. Cache settings for the scripts, css, images, fonts, etc. is not being set.What you must do is set this in the response header in response to the assets URL's. This is specific to the HTTP server you are using to serve your React application. If you are using Nginx, it is a one-line configuration change.
for setting for assests url, do we need to set from frontend or backend (server side) ?
Back-end. Your HTTP server needs to add the
Cache-ControlHTTP header in the response tono-cache. This is sufficient so long your HTTP server calculates and sends theETagheader. Then you'll be in the ideal position.Nginx calculates ETag's by default, I think, so it is a matter of adding the HTTP header. If you're not using Nginx to server your website, you need to search on how to do this in your server of choice.