PDA

View Full Version : How to enable ExtJS caching?



rbraddy
13 May 2013, 9:34 AM
Hi,

We have an ExtJS 4.1 app that is loading very slowly, even when most, if not all, Javascript files should already be cached. As shown below in Chrome debug Network view, the ext-all.js and our app JS files are not being loaded from cache, even though we have the cache buster disabled.
43754

In fact, it's been sufficiently slow that we have had to resort to using a download progress indicator...



<!DOCTYPE html>
<html>
<head>
<META NAME="COPYRIGHT" CONTENT="Copyright &copy; 2012 SoftNAS, LLC., All Rights Reserved. ">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pools</title>
<link rel="stylesheet" type="text/css" href="/softnas/css/loadstyle.css" />
</head>


<body>
<div id="loading-mask" style=""></div>
<div id="loading">
<p><img id="loading-image" src="/softnas/images/Logo_200.png" style="margin-left:8px; margin-right:8px;float:left;vertical-align:top; important!"</p>
<p><img id="loading-image" src="/softnas/images/ajax_indicator.gif" width="32" height="32" style="margin-left:14px; margin-right:8px;float:left;vertical-align:top; important!"/></p>
<div id="loading-ind" class="loading-indicator"><br><br>
<span id="loading-msg">Loading application&trade;...</span>
</div>


</div>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript">Ext.Loader.setConfig({enabled: true, disableCaching: false });</script>
<script type="text/javascript" src="app.js"></script>


<script type="text/javascript">
// eliminate the loading indicators
var loading=document.getElementById("loading");
if(loading)document.body.removeChild(loading);
// eliminate the loading mask so application shows
var mask=document.getElementById("loading-mask");
if(mask)document.body.removeChild(mask);
</script>


</body>


</html>


Any suggestions for how to fully-enable caching of all ExtJS and MVC files (controllers, store, model JS files)?

Thanks
Rick

rbraddy
13 May 2013, 9:47 AM
I decided to have a look at the cache headers in Firebug at 12:45 p.m. when this request was observed. The max age is set to 1 day (86,400 secs), so seems like the browser should be caching all of these JS files (which do not have the ExtJS cache-buster "dc=......." appended).

Response Headers


Accept-Ranges
bytes


Cache-Control
max-age=86400


Content-Encoding
gzip


Content-Length
557


Content-Type
text/javascript


Date
Mon, 13 May 2013 15:52:59 GMT


Etag
"1260b9-93e-4d2b62fc6748f"


Expires
Tue, 14 May 2013 15:52:59 GMT


Last-Modified
Mon, 07 Jan 2013 17:30:34 GMT


Server
Apache/2.2.15 (CentOS)


Vary
Accept-Encoding

skirtle
14 May 2013, 5:23 AM
This won't solve your problem but it may help your diagnostics...

Enabling the Chrome dev tools will disable caching. Firebug tends to be much better behaved in that regard. To get the most reliable results turn off all debuggers and just use the server logs to determine whether caching is working.

Standard performance advice around concatenating and minifying your JS files for production applies here but I'll grant you that caching should be possible without that.

My advice would be to focus your attention on getting caching working for ext-all.js before you target the individual JS files. Getting it to cache that simple JS file (which is included in the HTML markup) should be reasonable easy whereas the individual files could fall foul of some quirk of how they're included by the loader.

rbraddy
14 May 2013, 5:29 AM
Thanks for your response. Will give that approach a try.