So, I have Vue.js (using vue-cli and webpack) installed in my app. Everything works great. Also, I've implemented code splitting to so I don't have to load components that aren't being used until they are needed. This all works fine, as well. However, if I'm going to release a new version of my app, the code splitting .js files that are generated are going to be cached in the client browser and they won't get the updates until they clear their cache in their browser.
To prevent this from happening before with the main.js, I implemented code splitting appended the version number in a querystring value on the main.js file that webpack builds like this:
<script src="~/scripts/build/main.js?v=@ViewBag.VersionNumber" asp-append-version="true"></script>
After adding the code splitting, I now get the main.js file plus four extra .js files but I'm not sure how to version those auto-created .js files that the main.js file references.
main.js 0.js 1.js 2.js 3.js
I can easily name those by using the magic comments supported in webpack like this:
const page0 = ()=> import(/* webpackChunkName: "my-page-0" */ './components/MyPage0.vue');
const page1 = ()=> import(/* webpackChunkName: "my-page-1" */ './components/MyPage1.vue');
const page2 = ()=> import(/* webpackChunkName: "my-page-2" */ './components/MyPage2.vue');
const page3 = ()=> import(/* webpackChunkName: "my-page-3" */ './components/MyPage3.vue');
But I don't know how to make the names dynamic so that I can append a version or a hash or something that will force the browser to retrieve the uncached version after a software update has been made.
You have to use chunkFileName property of the Webpack output configuration. The basic idea is to read package.json file in your Webpack configuration and use the version field and append it to the chunk name.
const path = require('path');
// Assuming you have package.json. Read the version field.
const packageVersion = require('./package.json').version;
const SITE_DIST = path.join(__dirname, './dist');
module.exports = {
output: {
path: SITE_DIST,
filename: '[name].[fullhash].bundle.js',
// chunkFilename can be used to append the package version
chunkFilename: `[name]-${packageVersion}.js`
},
// Other configuration....
}
On a side note, I discourage using asp-append-version; try building an initial HTML/ASP.NET page using html-webpack-plugin. Webpack provides much better capabilities for cache busting. You can even generate an ASP page while ensuring that properly cache busted module scripts/css references are injected into it. For example,
new HtmlWebpackPlugin({
template: './site/index.html',
filename: 'index.asp'
})
For generating unique filenames to avoid caching issue, you can use Webpack's built-in output generation capabilities.
filename: '[name].bundle.js',
filename: '[id].bundle.js',
filename: '[contenthash].bundle.js'
// Or any combination of above
Further, using this, you don't even need to use your project version. Every time you change the code, Webpack will generate unique name for your bundles using filename and chunkFilename; for example: main.f62606ed4879fe34afca.bundle.js. And, this name would be automatically injected in HTML/ASP file generated by the plugin.
<script defer src="main.f62606ed4879fe34afca.bundle.js"></script>