mikkelrom / stencil-caching-issue

Steps to reproduce stencil cache issue

1. Clone repo to a local folder
2. Run npm run install-and-build
3. Run npm run gethash and observe the hash-value logged in the terminal - should be 18064c297d1974966e6d9b7758be17dd
4. Open stencil-test/src/components/my-component/my-component.tsx and change this: return <div>Hello, World! I'm {this.getText()}</div>; to this: return <div>Hello, World 2! I'm {this.getText()}</div>;
5. Run npm run build to generate new files with the recent change
6. Run npm run gethash again, and observe that the hash-value logged in the terminal has changed to 8b03a950fcd16b6c9f39f400c4df4822 - but the filename has not. It's still p-8874d9b8.system.js.

Conclusion

The contents of p-8874d9b8.system.js changes without the file itself is renamed, which means that the p-*-files isn't immutable even though:

1. The stencil-test/www/host.config.json suggests that this HTTP response header should be added to files that matches /build/p-*: cache-control: max-age=31556952, s-maxage=31556952, immutable

2. The docs says that:

   1. the files can be "forever-cached"
   2. "If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different" - this is currently not true unfortunately 😢

   During production builds, the content of each generated file is hashed to represent the content, and the hashed value is used as the filename. If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different. By doing this, deployed apps can "forever-cache" the build directory and take full advantage of content delivery networks (CDNs) and heavily caching files for faster apps."

   https://stenciljs.com/docs/config#hashfilenames