Webpack-dev-server: .wasm files are too aggressively cached by the server

Created on 12 Apr 2018 · 10Comments · Source: webpack/webpack-dev-server

Operating System: Linux big-beefy 4.13.0-38-generic #43-Ubuntu SMP Wed Mar 14 15:20:44 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
Node Version: v9.3.0
NPM Version: 5.8.0
webpack Version: 4.4.1
webpack-dev-server Version: 3.1.1

[X] This is a bug
[ ] This is a modification request

Code

Test case: https://github.com/rustwasm/wasm_game_of_life/tree/d1d20e6b8ffe9f63e8a058055d5696ede0a41927

Expected Behavior

Modifying the .wasm triggers a refresh of the page with the new .wasm modifications reflected, just like modifying JS files does.

Actual Behavior

The .wasm seems to be too aggressively cached by webpack-dev-server, and changes to it are not reflected on the page unless the server is restarted.

(Note: I verified that disabling the network cache in the browser results in fresh 200 requests for the .wasm but that the response payload is not the modified .wasm on disk, ergo this bug is not the browser's network cache acting up.)

For Bugs; How can we reproduce the behavior?

Install the rust toolchain so you can modify and recompile the .wasm, as described in https://rust-lang-nursery.github.io/rust-wasm/game-of-life/setup.html
cd wasm_game_of_life
npm install
npm run serve in a new terminal, so it will keep running
verify that the game of life is working at http://localhost:8080
In src/lib.rs, find the pub fn new() -> Universe method. Replace its body with panic!():
```
pub fn new() -> Universe {
panic!()
}
```
npm run build-debug to rebuild the .wasm with the panic changes
refresh http://localhost:8080 -- it should not have a working game of life anymore, and there should be an error in the console from the panic. If it is still working, then that means the new .wasm was not loaded.

Source

fitzgen

👍2

All 10 comments

For a slightly more self-contained reprodution:

Clone https://github.com/alexcrichton/webpack-dev-server-issue-1376
cd into checkout directory
npm install
cp add1.wasm add.wasm
npm run serve
Open a web browser to http://localhost:8080, you should see a dialog with "2" (1 + 1 = 2)
In a different terminal (while npm run serve is still running), execute cp add2.wasm add.wasm
- This simulates the wasm being updated from a Rust compilation or something like that
Notice how webpack-dev-server rebuilds... something?
Refresh the web page. It's expected to see 3 (1 + 2 = 3), but you currently see 2
Kill and restart npm run serve
Refresh the web page, you'll now see 3

alexcrichton on 20 Apr 2018

❤1

Just ran into this too. If someone can point me to the relevant module(s) for webpack I can take a look.

jasondavies on 20 Apr 2018

❤1

I think this is an issue in webpack itself rather than webpack-dev-server.

Steps to reproduce without using dev server:

Modify the package.json and add this to scripts: "build": "webpack"
cp add1.wasm add.wasm
npm run build - shows 8272f8059cff031ea68e.module.wasm in bundle
git grep --untracked '{"./add.wasm":' dist/ - shows 8272f8059cff031ea68e in bundle
cp add2.wasm add.wasm
npm run build - shows 767437f29c6ec784dbb9.module.wasm in bundle
git grep --untracked '{"./add.wasm":' dist/ - shows 767437f29c6ec784dbb9 in bundle
npm run build -- --watch and leave it running
cp add1.wasm add.wasm - shows 8272f8059cff031ea68e.module.wasm in bundle
git grep --untracked '{"./add.wasm":' dist/ - shows 767437f29c6ec784dbb9 in bundle