What's New?

[CLOSED] Best practices to Ext Resources Size

  1. #1
    Jan 23, 2013, 12:18 PM

    [CLOSED] Best practices to Ext Resources Size

    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
    Last edited by Daniil; Jan 24, 2013 at 5:51 AM. Reason: [CLOSED]
  2. #2
    Jan 23, 2013, 1: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
  3. #3
    Jan 23, 2013, 2: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.
  4. #4
    Jan 23, 2013, 2: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
  5. #5
    Jan 23, 2013, 3: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>
  6. #6
    Jan 23, 2013, 3:16 PM
    Quote Originally Posted by advBackOffice View Post
    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.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Jan 24, 2013, 12:12 AM
    Thanks for your replies.

    We will work around that.



    Manoj

Similar Threads

  1. Tablelayout & colspan- best practices
    By springrider in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2011, 10:35 PM
  2. what is the best practices/methods to implement security for ext.net and extjs applications
    By webclouder in forum Open Discussions
    Replies: 2
    Last Post: Mar 11, 2011, 7:23 PM
  3. [CLOSED] Translation/localization, Official or Best Practices
    By opendat2000 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 09, 2011, 2:36 PM
  4. Window management best practices
    By dbassett74 in forum 1.x Help
    Replies: 1
    Last Post: Apr 20, 2009, 8:24 PM
  5. Best Practices for WebService CRUD operations
    By pkellner in forum Open Discussions
    Replies: 1
    Last Post: Dec 22, 2008, 4:55 PM

Posting Permissions