Minifying ExtJs

3
votes

We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.

What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.

Ext.Loader.setConfig({
enabled: true,
paths: {
    'Admin': '../../script/js/ace/admin',
    'Ext.ux': '../../script/js/ext4/ux'
}
});

Ext.require('Admin.view.Administration');

Ext.application({
   name: 'Admin',
   appFolder: '../../script/js/ace/admin',
   launch: function() 
   {
     Ext.QuickTips.init();
     var me = this;
     Ext.create('Admin.view.Administration', {
        renderTo: 'contentPanel'
     });
   }
});

Folder Structure

We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option. we tried the below command, but no jsb3 file got generated

 sencha build admin.jsb3 <path to the admin js folder>

Thanks in advance, any pointers are really appreciated.

I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.

Edit

we have multiple apps, and in most cases we try to use the js from other app folders. For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required

 Ext.Loader.setConfig({
  enabled: true,
  paths: {
    'Admin': '../../script/js/ace/admin',
    'Utilities': '../../script/js/ace/utilities',
    'Ext.ux': '../../script/js/ext4/ux'
  }
});

enter image description here

4
extjsextjs4extjs4.1extjs4.2
What is your backend: is it Java with a servlet container? – Andrei I
Yes, its java with servlets – objectone
I recommend you using jawr. Especially if you do not use Ext's loader, you can build bundles (bundle=group of minified JS files) and can request them separately. – Andrei I
jawr seems to be exactly what I might be looking at, but with the structure I have different folders and they are interdependent, I have edited the post to add the image which explains this. With jawr how does this handle – objectone
I gave you an answer, if you have some other quick questions, please ask there. Basically after you include bundles needed in your page, your Ext.loader should not try to load any files, because everything should already be loaded. – Andrei I

4 Answers

2
votes

If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.

Otherwise you can try the old JSBuilder from Sencha as well.

1
votes

I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.

At a high level, what you do is: 1) Run the sencha_dependencies plugin to generate a list of dependencies. 2) Pass the outputs to the uglify plugin to concat and minify the javascript. 3) Use grunt's copy task to replace to update your index.html with the minified output.

edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.

1
votes

I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.

How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).

Some tips:

  • Check this tutorial
  • Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
1
votes

If you are willing to give Sencha CMD another shot, you could try using the sencha compile command. 

sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js

--classpath is the folders you want to include.

--yui is the compressor

--output-file is the name of the javascript output.

I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html