Problems getting Stealjs cache-bust to work

StealJS
1

Hello,

I am having trouble getting the stealjs cache-bust extension to work in production.

I have the following line in my index.html

<script bundles-path="dist/bundles" src="/node_modules/steal/steal.production.js" data-main="app/app" cache-version="1"></script>

I see the following when the resources are loaded in the browser…

  steal.production.js
  app.js
  app.css?version=1

I was expecting to see “?version=1” appended to the app.js resource too.

In the development version it all works as expected. I see the timestamp appended to all the resources.

Here is an extract from my package.js:

  "dependencies": {
    ...
    "can": "2.3.27",
    ...
    "steal": "0.15.5",
    "steal-cache-bust": "0.2.1",
    "steal-css": "0.4.1",
  },
  "system": {
    "configDependencies": [
      "node_modules/steal-cache-bust/cache-bust"
    ],
  }

Any help or pointers to a solution will be much appreciated!

Rob

2

is it necessary to use steal 0.15 ?
can u use 0.16?

3

Thanks pYr0x
I just updated to steal 0.16.43 and I still see the same thing.

4

hello @robfoweraker
i have looked into this.

of course it is a design failure.

steal-cache-bust is working on development because steal knows that this is a config dependency. it loads steal-cache-bust before the index.js is loaded.
in production steal-cache-bust is bundled into the index.js file and steal therefore cant be load the index.js file with the cache-bust extension because it dont know that cache-busting is enabled.

for any future files, steal will load these files with a version number

@matthewp
my thoughts:
either we integrate steal-cache-buster into core and enable it by setting the steal config
or
we add (in steal 1.0) the fetch hook into the steal.production.js that we copied into the dist folder and remove cache-buster from being bundled

5

Thanks again @pYr0x

Should I raise an issue somewhere?

6

i did

https://github.com/stealjs/cache-bust/issues/12

you can workaround by use stealBundle=true while building and use the bundled steal version.
or you can add in the steal.production.js at the end following:

function _SYSTEM_addCACHE(loader) {

	var fetch = loader.fetch;
	var timestamp = new Date().getTime();
	var isBuildEnvironment = loader.isPlatform ? loader.isPlatform('build') || loader.isEnv('build') : typeof window === 'undefined';
	loader.fetch = function (load) {
		var loader = this;
		var cacheVersion;
		var cacheKey;
		var cacheKeyVersion;
		if (!isBuildEnvironment) {
			cacheVersion = isProduction() ? loader.cacheVersion || timestamp : timestamp;
			cacheKey = loader.cacheKey || 'version';
			cacheKeyVersion = cacheKey + '=' + cacheVersion;
			load.address = load.address + (load.address.indexOf('?') === -1 ? '?' : '&') + cacheKeyVersion;
		}
		return fetch.call(this, load);
	};
	function isProduction() {
		return loader.isEnv && loader.isEnv('production') || loader.env === 'production';
	}
}
if (typeof System !== "undefined") {
	_SYSTEM_addCACHE(System);
}
7

Thanks again. I will give it a go

8

Thanks pYr0x,

but steal.production.js be got from npm or bower, why do we to edit at this file?

9

why do you have to edit this file?
because if you did not, the cache buster plugin didn’t work. but you dont have to modifiy your steal at all, see below…

but you can also workaround by adding the cache buster file after steal… see matthew’s comment
https://github.com/stealjs/cache-bust/issues/12#issuecomment-269327725

10

thanks pYr0x so much

11

Any updates on this?
I add steal.production.js and cach-bust.min.js like this on my page.

<script type="text/javascript" 
    base-url="/modules/myApp/dist" 
    cache-key="rev" 
    cache-version="f8408c55e4ce2e9e0fda" 
    src="/modules/myApp/dist/steal.production.rev-8fb596be55.js"></script>
<script type="text/javascript" 
    src="/modules/myApp/steal-cache-bust/cache-bust.min.rev-0bca36988f.js"></script>

Steal then loads main.js and main.js loads main.css.
But only main.css is loaded with the cache-key/version. (main.css?rev=f840…)

12

we released a new steal version 1.2.0 pre.2
the cachebust is now a core module
check out docs
https://github.com/stealjs/steal/pull/1045/files

13

:+1: Steal 1.2.0 solves this issue!
Great work guys!

1 Like