Cache buster for SystemJS

in Front-End Web Technologies


SystemJS module loader uses XHR to load module files from the server. This means that it is subject to caching issues.

In order to prevent caching during development most developer do one of the following:

1. Open browser’s DevTools and disable the cache

2.Configure the local web server so each module is sent back to the browser with the appropriate cache buster headers

When dealing with large scale SPA application this behavior might be too expensive. Assuming you have SPA with hundreds of files (quite common these days), refreshing the browser while cache is disabled is time consuming.

So, I wrote a small gulp task + SystemJS plugin that calculates the hash value for each JavaScript file and then uses the value at run time.

See more details and sample at the Github repository.

Contact us
You might also like