Please click on any Advertisement, if you like this blog.

Wednesday, August 22, 2012

Optimize performance of Applications developed in ExtJs 4 or Sencha 2: Code Minification


All of us know that just creating any application in very short time frame is not the real achievement. The real effort is invested after creation of application to make it more efficient, faster, and more responsive. Once, I have developed an application in ExtJs 4.1 in very short time frame and when we tested it in real time scenario, I found that my application was very slow and then I started considering about the ways by which I can make my application faster. I have done several changes like:

1)      Code Minification
2)      Applied Phone Gap
3)      Utilized browser local storage or SQL-lite database
4)      Masking
5)      Zip the response data
6)      Use of Dynamic Loading

Here currently we are going to discuss the technique of code minification. We will discuss the other remaining techniques in my next blog.

Code Minification:
It is the one of the easiest way to decrease the page loading time. This can reduce the code size upto 10 times i.e. if the total size of all of your custom javascript files is say 3 MB, it can reduce this size to 300 KB and thus similarly the page loading time will also be decreases. Code minification does not do any huge modification in your code. It just merge codes of all of your javascript files in a single file and removes the unwanted blank spaces, tabs and comment lines. It also reduces the variable name length.  Following are the steps of code minification by using Sencha tool.

Steps for Minification of javascript files of Sencha application.

1.       Download SenchaSDKTools-2.0.0-beta3-windows.exe

2.       Set path in window environment variable to “C:\Program Files (x86)\SenchaSDKTools-2.0.0-beta3”

3.       Restart your system if needed.

4.       Download Jsbuilder3 and unzip it

5.       Open command prompt and go to the root directory of web project i.e. WebContent in case of tomcat

6.       Now create .jsb3 file by using following command:

C:\abc\ MyWebProject\WebContent>sencha create jsb -a  C:\abc\ MyWebProject \WebContent \index.html -p MyWebProject.jsb3
       This .jsb3 file will be created at root directory i.e. WebContent

7.       Now create single .js file for all of your .js files in your project by using the previously created .jsb3 file with following command:

C:\abc\ MyWebProject \WebContent >sencha build -p MyWebProject.jsb3 -d C:\abc\ MyWebProject \WebContent
        This command will create two .js files. 1) all-classes.js 2) app-all.js

8.       Go to your index.html file and replace ext-debug.js with ext.js and app.js with app-all.js

9.       The newly created app-all.js is in unminified format and it can be further minified by using yuicompressor and for this, yuicompressor-version.jar is needed. To Further minify it, following command should be fired:

C:\xyz\Newfolder>java -jar yuicompressor-2.4.2.jar C:\xyz\Newfolder\app-all.js -o C:\xyz\Newfolder\ap.js
 
       Now copy the minified code from ap.js file and paste it in app-all.js of your application.

Important Note: During performing all of the above steps, you should be sure that your webserver is running and you are using your app.js file. Because, .jsb3 file is created by reading your app.js file and it is done only when your webserver is running.

3 comments:

  1. Dear Jitu,
    There are lot of sites are available to minify the java script. Then why do we need to follow this steps.
    Please mention if there are any extra advantage is available.

    ReplyDelete
    Replies
    1. Hi Subhendu,

      Actually, these are the steps to minify the javascript code written in SenchaTouch framework for Palm devices. Here, we are using Sencha commands which automatically arranges the class in the jsb file according to their class hierarchy and their dependancy as Sencha command is fully aware of the Sencha Framework Syntax. It also include only those part of Sencha library files which are actually being demanded by our custom class. So, this is a tool that is provided by Sencha to facilitate the minification work for application developed in SenchaTouch framework which is not so easy with any other minification tool as they don't know about Sencha syntax.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete

Please provide your precious comments and suggestion