Menu
We're using the aurelia-cli. The tasks include these:
build.json
build.ts
process-css.ts
process-markup.ts
process-sass.ts
run.json
run.ts
test.json
test.ts
transpile.ts
How if at all do we do a cache-busting solution the with cli?
What we've tried already is to increment the number of the scripts directory, so that it goes scripts1, scripts2, scriptsN.
480
It's my lucky day. An aurelia-cli release from 8 hours ago says this:
Features: Support bundle revision numbers
First, install 0.20.0 and create a new app.
npm install aurelia-cli@">=0.20.0" -g
au new my-app
Or, upgrade an existing app.
npm install aurelia-cli@">=0.20.0" --save-dev
Next, open my-app/aurelia-project/aurelia.json.
Set the build.options.rev property to true.
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage",
"rev": true
},
Set the output and index properties inside the build.targets
"targets": [
{
"id": "web",
"displayName": "Web",
"output": "scripts",
"index": "index.html"
}
],
The aurelia-cli will look for the index file and replace the reference to scripts\vendor-bundle.js like this:
<script src="scripts\vendor-bundle.js" data-main="aurelia-bootstrapper">
<script src="scripts\vendor-bundle-947c308e28.js" data-main="aurelia-bootstrapper">
Finally, build the app.
au build --env prod
Your bundles will look something like this:
app-bundle-e0c4d46f7d.js
vendor-bundle-dba9184d78.js
cli/lib/build/bundler.js
let defaultBuildOptions = {
minify: "stage & prod",
sourcemaps: "dev & stage",
rev: false
};
cli/lib/build/bundler.js
if (buildOptions.rev) {
//Generate a unique hash based off of the bundle contents
this.hash = generateHash(concat.content);
bundleFileName = generateHashedPath(this.config.name, this.hash);
}
My Aurelia app is hosted in an ASP.Net Core MVC page, and I have had good success using the ASP.Net Core asp-append-version tag helper to ensure that browsers load updated JS bundles correctly.
This attribute can be added to script tags, and ASP.Net will automatically append a version # based on the script file's contents. The hash is generated when the application starts, so the application must be restarted in order for ASP.Net to detect any new changes.
The trick in getting this to work with Aurelia lies in also adding the app-bundle.js file as a script tag on the hosting page:
<body aurelia-app="main-public" class="public">
<script src="scripts/vendor-bundle.js"
data-main="aurelia-bootstrapper"
asp-append-version="true"></script>
<script src="scripts/app-bundle.js"
asp-append-version="true"></script>
</body>
The output looks something like this:
<body aurelia-app="main-public" class="public">
<script src="scripts/vendor-bundle.js?v=97hNIHUQnLL3Q44m2FWNV-3NIpgqvgIDIx5sUXUcySQ" data-main="aurelia-bootstrapper"></script>
<script src="scripts/app-bundle.js?v=htYOQIr-GHrpZIDiT2b32LxxPZs10cfUU4YNt9iKLro"></script>
</body>
Disclaimer: I haven't inspected the vendor-bundle.js source code with regard to the loading behavior of app-bundle.js, so I don't know how robust this solution is. I have not encountered any issues with this approach, and it is working well for my scenario; however, please use with caution and test adequately before applying to production code.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
