- Clone repo to a local folder
- Run
npm run install-and-build
- Run
npm run gethash
and observe the hash-value logged in the terminal - should be18064c297d1974966e6d9b7758be17dd
- 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>;
- Run
npm run build
to generate new files with the recent change - Run
npm run gethash
again, and observe that the hash-value logged in the terminal has changed to8b03a950fcd16b6c9f39f400c4df4822
- but the filename has not. It's stillp-8874d9b8.system.js
.
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:
-
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
-
The docs says that:
- the files can be "forever-cached"
- "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."