Vue ASYNC component imports with cache-busting

Since Laravel Mix now supports async component importing, I wanted to take advantage of the performance boost that this can provide to your application. However I am running into issues with the hosting provider that I am using for a series of applications. The provider uses CDN-like caching that can be pretty aggressive, which causes havoc with any and all production pushes that I perform.

In most cases, if you were having issues with caching on a JS/CSS file, you would append a query parameter to the end of the file name and be done with it. However if you are using async imports, Webpack assigns the components, or chunks, with a numeric name and then references this numeric name in the root JS file; like so 4.js. Obviously the CDN will cache this, but what's more, is that you cannot add a query parameter to this file to invalidate the cache.

Has anyone encountered this issue before, and if so, how did you get around it?