Webpack-dev-server: Caching issue

Created on 13 Jun 2019 · 8Comments · Source: webpack/webpack-dev-server

Operating System: macOS High Sierra Version 10.13.4
Node Version: 8.11.3
NPM Version: 6.2.0
webpack Version: 4.29.6
webpack-dev-server Version: 3.2.1

[ ] This is a bug
[ ] This is a modification request
[x] This is a weird thing

Code

// webpack.config.js
devServer: {
            port:3,000
            hot: true,
            compress: false,
            historyApiFallback: {
                index: '/dist/index.html'
            },
            publicPath: '/dist/'
}

Expected Behavior

The Last-Modified header will be returned

Actual Behavior

No Last-Modified header. Only ETag is returned and no Cache-Control header.

For Bugs; How can we reproduce the behavior?

Just run webpack-dev-server.

For Features; What is the motivation and/or use-case for the feature?

Source

Otobelikethee

Most helpful comment

Etag is sended by expresss, see reponse.js for details
To disable cache I set devServer.headers in webpack.config.js works fine

    headers: {
      'Cache-Control': 'max-age=0',
      get etag() { return Math.random() + ''; },
    },

feix760 on 1 Nov 2019

😄2 👍1

All 8 comments

1655

Otobelikethee on 13 Jun 2019

Not sure it is good idea, what is problem? Express sends headers, you setup this using options

alexander-akait on 13 Jun 2019

@evilebottnawi,

Could you please help figure out where you disable the Last-Modified header?

As the express#express.static shows that lastModified is true by default. However, I couldn't see the header returned.

Recently, we have encountered a problem in our dev environment (Not served by webpack dev server):

The browser does not send the validation request to the origin server as it will assign a heuristic expiration time when there is no Cache-Control header but Last-Modified header returned.

Therefore, I want to know if you disable Last-Modified header on purpose.

Otobelikethee on 14 Jun 2019

Therefore, I want to know if you disable Last-Modified header on purpose.

No, it is bad idea

We have devServer.staticOptions https://webpack.js.org/configuration/dev-server/#devserverstaticoptions option for this

The browser does not send the validation request to the origin server as it will assign a heuristic expiration time when there is no Cache-Control header but Last-Modified header returned.

I can't understand problem(s), what do you mean "browser does not send the validation request to the origin server"? Please provide reproducible test repo, if it is bug we change behavior

alexander-akait on 14 Jun 2019

@evilebottnawi,
I just created and started an app (my-app) by:

npx create-react-app my-app
npm start

or simple webpack configuration.

And I found that there was no any Last-Modified header returned for static assets (like js/css).
Therefore, I guess that you perhaps disable the Last-Modified header.
Maybe you can have a look at the response headers of static assets in your project. And I think there would be no Last-Modified header.

There is no bug with webpack-dev-server. I just want to know why there is no Last-Modified header returned for static assets.

Thanks!

Otobelikethee on 17 Jun 2019

Etag is sended by expresss, see reponse.js for details
To disable cache I set devServer.headers in webpack.config.js works fine

    headers: {
      'Cache-Control': 'max-age=0',
      get etag() { return Math.random() + ''; },
    },

feix760 on 1 Nov 2019

😄2 👍1

@Otobelikethee the file served by webpack-dev-middleware won't add header Last-Modified , browser won't calculate heuristic freshness. However, express.static will add Last-Modified by default.

Maybe the assets you check are not served by express.static, hope it can help you