caching issue with web application developed using reactjs & webpack

后端未结

关注

 3  578

I am working on a web application developed using reactjs and webpack. After every deployment, we have to ask users to clear the browser cache and restart their browsers. I

相关标签:

3条回答

忘了有多久

2021-01-04 10:04

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2021-01-04 10:08
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>
      }
     new HTMLWebpackPlugin({
          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>
    <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>
```
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2021-01-04 10:11
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...