In this tutorial I will show you how to reduce your ExtJS4 application load times by half, using Sencha SDK Tools. Also, I will show you how to do a clean custom build, the kind that doesn’t cause your production code to occasionally download JS files via autoloader. Another gem of this example – we’ll get our “compiled” JS down to just about 100 KB, instead of 500 KB+ that results if you follow other tutorials.
ExtJS4 class dependency system allows for a dynamic class loader and custom .js builds, minified and all. There’s an excellent example @ existdissolve.com of how to get a basic setup going, so read it before proceeding. I will address the next step – actually writing your own code with proper dependencies for the build script.
Let’s say you have the basic Viewport example, but with an anchor layout, and a custom component that is created when a button is clicked, both via Ext.create() and lazy initialization (xtype):
app.js
Ext.application({ name: 'T4E', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: { type: 'anchor' }, items: [{ xtype: 'button', text: 'Create by Ext.create()', handler: function(){ Ext.ComponentQuery.query('viewport')[0].add( Ext.create('T4E.panel.Custom') ); } }, { xtype: 'button', text: 'Create by lazy xtype', handler: function(){ Ext.ComponentQuery.query('viewport')[0].add( { xtype: 't4e_custompanel2' } ); } }] // eo items }); // eo Ext.create(viewport) } // eo launch() }); |
app/panel/Custom.js
Ext.define('T4E.panel.Custom', { extend: 'Ext.panel.Panel', alias: 'widget.t4e_custompanel', title: 'Custom Panel', html: 'This is custom panel!' }); |
app/panel/Custom2.js
Ext.define('T4E.panel.Custom2', { extend: 'Ext.panel.Panel', alias: 'widget.t4e_custompanel2', title: 'Custom Panel2', html: 'This is custom panel2!' }); |
If you compile the following code into app-all.js, it will have the following problems:
- 500KB+ (has a ton of stuff that viewport doesn’t need)
- Both Viewport and Anchor Layout JavaScript files will still get loaded by class loader
- Custom component will still be loaded by class loader
- Custom component with lazy initialization will error out
The trick is to use Ext.require(), after application load, and execute your code in callback. If you proceed with your code outside of the callback, you may run into issues.
Ext.application({ name: 'T4E', appFolder: 'app', launch: function() { Ext.require([ 'T4E.panel.Custom', 'T4E.panel.Custom2', 'Ext.container.Viewport', 'Ext.layout.container.Anchor' ], function() { // callback Ext.create('Ext.container.Viewport', { layout: { type: 'anchor' }, items: [{ xtype: 'button', text: 'Create by Ext.create()', handler: function(){ Ext.ComponentQuery.query('viewport')[0].add( Ext.create('T4E.panel.Custom') ); } }, { xtype: 'button', text: 'Create by lazy xtype', handler: function(){ Ext.ComponentQuery.query('viewport')[0].add( { xtype: 't4e_custompanel2' } ); } }] // eo items }); // eo Ext.create(viewport) }); // eo Ext.require() callback } // eo launch() }); |
…this will give you a file about 100KB in size, with no autoloader, proper lazy initialization, and half the loading times!
ExtJS4 Clean Custom Builds,
Great article. I wish there was a way to save on the CSS which is half the size of your new compressed files. I guess the best we can do is ‘compass compile’ for SASS Themes that get compressed.
Hmm great point, that CSS file is 200KB+ in size. I doubt Compass allows you to do that, as it really is stand-alone from ExtJS. I’m curious about this as well, but I fear there may not be a way.
I think I just realized that the actual compile JS file size is 400 KB, even though FireFox FireBug “NET” tab shows it as 100 KB! can’t quite wrap my head around it…
Practically, if we got many views script do we have to put it in require block?
I think so. It seems the Sencha build tool searches JS code for the require function and builds the .js file based on that, so you should be able to use it anywhere in your code. Probably even conditionally.