Browser may not use cache

Question

I'm using Webpack 4 and I'm in Hot Module Replacement mode while using Webpack devServer.

For some reason, chrome keeps downloading the bundles even when I'm using hashes.

The output:

Hash: 23594d99dc21755c5643
Version: webpack 4.17.1
Time: 1901ms
Built at: 2018-08-30 08:48:18
                           Asset       Size  Chunks             Chunk Names
        a17719b06f0064365b32.css   35 bytes       0  [emitted]  main
0.210b787809a8d87a8b98.bundle.js  501 bytes       0  [emitted]  main
1.640168cdfaffafd85d00.bundle.js    111 KiB       1  [emitted]  vendors~main
  ff4dc475b068a1649cf3.bundle.js   1.43 KiB       2  [emitted]  runtime
                      index.html  417 bytes          [emitted]
Entrypoint main = ff4dc475b068a1649cf3.bundle.js 1.640168cdfaffafd85d00.bundle.js a17719b06f0064365b32.css 0.210b787809a8d87a8b98.bundle.js
[60] ./src/main.css 39 bytes {0} [built]
[62] ./src/index.js + 1 modules 765 bytes {0} [built]
     | ./src/index.js 97 bytes [built]
     | ./src/component.js 643 bytes [built]
    + 61 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 489 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/main.css:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader!./src/main.css 194 bytes {0} [built]
        + 1 hidden module

After clearing cache from chrome: After a second refresh without clearing the cache:

My questions:

Why are the bolded (yellow) bundles not loaded from disk cache?
What are the localhost and ng-validate.js files? (I don't have any angular dependencies).

Link to my playground-project: https://github.com/stavalfi/webpack-demo

They are loaded from the cache as the file is not modified. (304 status code suggests this as well as the small file size) — nipuna-g, Aug 30 '18 at 06:18
Then why `ng-validate` is specified as loaded `from disk cache` and the rest are not? — Stav Alfi, Aug 30 '18 at 06:23
That should be because ng-validate saying it is cachable on the initial response. https://stackoverflow.com/a/1665097/3156644 — nipuna-g, Aug 30 '18 at 06:25

score 2 · Accepted Answer · answered Aug 30 '18 at 06:22

Chrome does not re-download those files. But it has to make a request to ensure that the file has not changed. The response status is 304('Not Modified'). The request still takes a few bytes to go and check for file changes.

ng-validate.js is called from 'content-script' suggesting that it could be called from an extension. You can check this by visiting the same page with all extensions disabled (or in incognito mode.)

Browser may not use cache

1 Answers1