Here at CrowdSync, we’re huge fans of CloudFlare.
As customers, we are leveraging the power of CloudFlare’s caching mechanisms.
Part of our deployment process to production involving flushing the cache via
the CloudFlare API. Problem there is that only solves half of the caching
dilemma.
Even with our CloudFlare cache being purged, modern browsers have their own
caching mechanisms that also need to be busted.
To accomplish this, we channeled a concept from days of yore… versioning!
We could have went the route of appending a time stamp as a query string
parameter of the bundled files, but I’ve never been a fan of how that looked.
Doesn’t hurt that back in the day this method wasn’t as reliable as it is now.
Instead of a query string parameter, we have setup Webpack to inject the current
time stamp into the file names being generated at the time the build was
initiated.
No special plugins needed, just update your Webpack configuration to grab the
current time stamp from the Date object and inject it into your file names:
// Default names for local development
const filenames = {
css: 'bundle.css',
js: 'bundle.js',
// Cache busted names for production
if (process.env.NODE_ENV === 'production') {
const timestamp = +new Date
filenames.css = `bundle.${timestamp}.css`
filenames.js = `bundle.${timestamp}.js`
}
Then you can update any file name references you’re making to use the
filenames variable. Include additional variables or removes the ones you don’t
need, your call.
With the way we deploy our web application to production, this method gives us
the added benefit of having our bundle files versioned and we could easily roll
back if necessary.
Eventually we’ll need to starting pruning the bundle files in production, but no
need for premature optimization at this point in the game.
We can save that for tomorrow… NEXT ISSUE!
