PDA

View Full Version : [CLOSED] Best practices to Ext Resources Size



advBackOffice
Jan 23, 2013, 1:18 PM
Hello Support,


We are trying to reduce the size of ext resources. We are using Ext from our CDN right now and using ext-all.js and extnet-all.js.
But the size of these files is too high. We want to reduce the size of these js by including only the JS files of the components which we are using.
But there is no easy way around to know which JS is dependent on which JS.
So if see a folder of a component eg: button or grid, it looks like we may be using all the JS.

So now we need your help in that , we want know what is the best practices to reduce the size of ext resources so that our pages should open instantly.


Regards


Manoj

Vladimir
Jan 23, 2013, 2:42 PM
Can you explain why do you want to reduce size of extjs files?

Do you want to reduce resources loading time? If yes then you will not save a lot time because
- browser caches downloaded js/css files and it will not request it again (get from local cache)
- by default, Ext.Net compress (i guess that your CDN compress also) js files. For example, size of ext-all.js is 1 289 686 bytes but 389 482 bytes in compressed state (file is transfered in compressed state)

If you want to save a memory is occupied by browser page then i don't think that it will effective also (i did not compare memory consumption for empty page with various extjs set of classes, it is just my supposition), if you do not use instances of extjs widgets then prototype of such classes doesn't consume a lot of memory

jchau
Jan 23, 2013, 3:26 PM
Vladimir, great explanation. I am curious if there's overhead for browser parsing through the javascript file which will affect page load time? If you have too many javascript classes defined and so on.

Vladimir
Jan 23, 2013, 3:41 PM
I did not make such tests bit it is easy, just get start time before all resources (before script tags) and get end time in onReady handler
For example, to test extjs file parsing you can use the following page


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var _start= new Date().getTime();
</script>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>


<script type="text/javascript">
Ext.onReady(function () {
alert(new Date().getTime() - _start);
});
</script>

</head>
<body>
</body>
</html>


In this test case we use local resources
- IE9: 500-600 ms
-Chrome: 400-500 ms
-FF: 600 ms

Daniil
Jan 23, 2013, 4:04 PM
Here is another test case.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{

}
}

protected void TestDirectEventHandler(object sender, DirectEventArgs e)
{
X.Msg.Alert("DirectEvent", "Hello from Server!").Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var _start= new Date().getTime();
</script>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.onReady(function () {
alert(new Date().getTime() - _start);
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
</body>
</html>

geoffrey.mcgill
Jan 23, 2013, 4:16 PM
Hello Support,


We are trying to reduce the size of ext resources. We are using Ext from our CDN right now and using ext-all.js and extnet-all.js.
But the size of these files is too high. We want to reduce the size of these js by including only the JS files of the components which we are using.
But there is no easy way around to know which JS is dependent on which JS.
So if see a folder of a component eg: button or grid, it looks like we may be using all the JS.

So now we need your help in that , we want know what is the best practices to reduce the size of ext resources so that our pages should open instantly.


Regards


Manoj

You are probably focusing on the wrong optimizations. By default, the .js files in Ext.NET are as small as they're going to get. Removing some Component scripts (such as not using Button) isn't going to make much (if any) difference.

If you think you are experiencing performance problems because of the .js file size, the problem is probably related to something else.

advBackOffice
Jan 24, 2013, 1:12 AM
Thanks for your replies.

We will work around that.



Manoj