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.