🙋 Use MD5 of File Content As Name To Bust Caches

This is something my team is interested in implementing, but want to make sure we’re not heading in the wrong direction…

🤔 Expected Behavior

In order to serve assets through a CDN, we need to use a hash of the file contents as part of the filename. This is the only way to ensure that cache busts at the right time and only at the right time.

• mtime changes based on developer machine / git checkout
• etags don’t work with CDN
• query string approaches don’t work with all proxies
• the current approach never cache busts on content change
• some sort of random string (current time, or build time, or something) would bust too often
• manual versioning of the entire build (ie, output to /dist/v2) is annoying and busts too often
• manual versioning of individual files (ie, app-v2.js) is really annoying

This issue has been discussed extensively here: https://github.com/parcel-bundler/parcel/issues/188. We have discussed it a bit on slack start here: https://parcel-bundler.slack.com/archives/C8QC15PNY/p1515609163000373

To be specific, I am proposing files be named ${contentHash}.${ext}}

😯 Current Behavior

Currently, the filename is a hash based on the name of the file (and some options like whether or not hmr is enabled, I believe). Something like ${fileNameHash}.${ext}}

💁 Possible Solution

@shawwn proposes parts of the solution here: https://github.com/parcel-bundler/parcel/issues/188#issuecomment-353141569

@Munter describes how tree traversal needs to work to make the cache bust in all the right places here: https://github.com/parcel-bundler/parcel/issues/188#issuecomment-357072153

One key piece of the puzzle will be to only enable this behavior on build (ie, when building for production). Leave it off in the development modes, so you don’t have to worry about

🔦 Context

We want to serve our assets (css, js, images) through a CDN like CloudFlare or CloudFront. If something about the url doesn’t change, then new versions of those assets will never make it to the end user. If too much changes, then we bust the cache too aggressively.

[shanebo]

@DeMoorJasper @Munter, we all want to use Parcel. That’s why we’re here. But if parcel doesn’t have a solution for cache busting only the files that have changed how can we use it in production? To ask a different way, how are the rest of you who are using it in production cache busting only the files that have changed?

[TimNZ]

Guess I’ll have to use Webpack for production builds.