Cache busting: append query string or rename file?

Question

When we try to break static assets caches, there are two common ways to doing that:

1. By appending query string like assets/file.ext?v=123abc

2. By renaming files like assets/file.123abc.ext

However after days of searching, I found that most of building tools prefer to renaming files, e.g. gulp-rev. In my view this kind of revision will generates lots of file chunks on the server:

assets
 |_ file.a.ext
 |_ file.b.ext
 |_ file.c.ext
 |_ file.d.ext
 |...

Any idea about this?

Answer 1

After days of searching, I found something interesting for query string solution (assets/file.ext?v=123abc):

If we use CDN to serve static assets, dynamic pages and static assets are hosted separately. Once we want to publish a new version of app, the conflict occurs: which part of the resources should be updated first?

1. Pages first. If users visit your site right after you updated dynamic pages, the assets are pointing to new versions, e.g. assets/file.ext?v=456def, then browsers download old assets and cache them as new version, unluckily those users will never get the right resources.

2. Assets first. Assuming there're some new users go to your site right after new version of assets are published, the old page and the new scripts, aha! There may be some deadly errors and your site gets boooooom!

So here comes the solution of renaming files (assets/file.123abc.ext). Different versions of files are named differently, so they will not overwrite each other. Therefore we updated assets first, then the pages, everything goes as expected, woohoo!

For more details please read this article(Chinese): https://www.zhihu.com/question/20790576/answer/32602154