Caching Issue With Web Application Developed Using Reactjs & Webpack
Solution 1:
You can use html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
hash: true
})
]
hash: true | false if true then append a unique webpack compilation hash to all included scripts and css files. This is useful for cache busting.
Solution 2:
you should use html-webpack-plugin with an template html and put hash configuration in output. So your webpack config will look something like this:
output: {
filename: "[name].[hash].js",
path: <path to your bundle folder>
}
newHTMLWebpackPlugin({
hash: true,
template: paths.resolveFromRoot("src/index.html") //where you want the sample template to be
})
And your index.html will be something like this:
<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="expires"content="0"><metahttp-equiv="Cache-Control"content="no-cache, no-store, must-revalidate" /><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title>Title</title></head><body><divid="app"></div></body></html>The HTML webpack plugin will automatically insert the revised script in the index.html created in your bundle folder. Hope this helps. For caching fix you can refer to https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching where versioning and server response header configurations is mentioned for effective caching solutions.
Solution 3:
There is an easy way to avoid this problem without any extra stuff. Use webpack's built-in hashing ability.
You can read about adding hash to your bundle here. While the title of this is "Long term caching" it's only true in case when your files doesn't change. But if you rebuild your bundle it get new unique hash, so browser would think it is new file and download it.
Post a Comment for "Caching Issue With Web Application Developed Using Reactjs & Webpack"