How to improve the load time of ExtJS 6.6 Application

[tanmayasahu]

Hi Sencha Lovers,
I am using ExtJS 6.6 and trying to fix the loading time of the application. On the first load it is taking almost 40+ seconds and downloading 9+ MB of files. Why it is happening, anybody have any idea on how to improve it. Am I missing some settings needed to do in build process ?
Please help me how can we improve the performance of the application.

Thanks in advance for your help
Tanmay

[mitchellsimoens]

Are you loading a built (compressed and obfuscated) version of the app? Are you loading off a CDN?

[hakimio]

1. You have to build production version of your app using sencha cmd: "sencha app build"
2. You should enable gzip compression and http2 protocol on your web server
3. It might be a good idea to use nginx server instead of Apache as it serves static resources much faster

Also, like Mitch already pointed out it might be a good idea to look into CDN solutions like Amazon CloudFront or something similar from Microsoft or Google.

[sarimarton]

We don't have Sencha Cmd in the Firm (I guess for licencing reasons), but it's also a wise idea not to use ext-all/ext-all-debug, but just ext.js (or ext-debug.js and minify later). But this is a little tricky, because ext.js will load core dependencies dynamically. Now we wanted to bundle it for production, for which the order of the files during the concatenation is critical. Ext.Loader.history and Ext.manifest contains all the necessary ordering information, but unfortunately ext.js contains some "override" classes, which reference yet undefined dependencies. This means that these dep classes inevitably get loaded dynamically. This is a huge surprise actually, because these "override" classes are in the right position in ext-all.

Any information from Ext devs, why is it this way?

We actually worked around the problem with a premature Ext.define override which delays class definition processing until all the necessary classes are defined for the given class.

This way a bundled app can easily go below 2 MB, while ext-all.js itself is 2.3 MB.

Here is the script btw, should anyone be interested:

--------------

/**
 * This is a pre-extjs utility snippet which fixes to-be-loaded unbundled Ext JS in
 * synchronous mode (flattened/concatenated). Yes, it has to be used _before_ Ext JS is loaded.
 * It sets up a pre-made empty Ext object with a setter on 'define', so we can hook up.
 * It delays Ext.define() calls until all the dependencies of the given class have already been defined.
 * It solves the problem that unbundled ext(-debug).js contains unresolved dependencies in its Ext.overrides.*
 * definitions. In other words: it ensures the correct order of Ext.define() invocations,
 * given that loading/defining all the necessary classes (in any order) is ensured.
 */
/* eslint-disable */
(function(window) {
    // quick util replacements for lodash functionality.
    const castArray = val => val instanceof Array ? val : [val];
    const values = obj => obj && Object.keys(obj).map(key => obj[key]);
    const negate = pred => (...args) => !pred(...args);

    // extract wildcarded deps (like 'Ext.data.operation.*')
    const extractDep = depName => {
        const re = new RegExp(depName.replace(/\./g, '\\.').replace(/\*/g, '.*') + '$');
        return Object.keys(Ext.manifest.classes).filter(clsName => re.test(clsName));
    };

    // get dependencies for a given class descriptor.
    const getDeps = clsData => [
        clsData.extend,
        clsData.override,
        ...castArray(clsData.requires),
        ...castArray(values(clsData.mixins))
    ]
        .filter(dep => typeof dep === 'string') // filter out undefineds and already resolved object deps
        .reduce((cum, next) => [...cum, ...extractDep(next)], []);

    const notDefined = clsName => !Ext.ClassManager.get(clsName);
    const hasDep = node => node.deps.length;
    const hasNoDep = negate(hasDep);

    const cleanupNodes = nodes =>
        nodes.forEach(node => {
            node.deps = node.deps.filter(notDefined);
        });

    let nodes = [];

    const overrideDefine = originalDefine =>
        function(clsName, data) {
            const undefinedDeps = getDeps(data).filter(notDefined);

            if (undefinedDeps.length) {
                nodes.push({ args: arguments, deps: undefinedDeps });
            } else {
                const result = originalDefine(...arguments);

                cleanupNodes(nodes);
                while (nodes.some(hasNoDep)) {
                    nodes.filter(hasNoDep).forEach(
                        node => originalDefine(...node.args)
                    );
                    nodes = nodes.filter(hasDep);
                    cleanupNodes(nodes);
                }

                return result;
            }
        };

    let overridenDefine;

    window.Ext = Object.defineProperty({}, 'define', {
        set(define) {
            overridenDefine = overrideDefine(define.bind(this));
        },
        get() {
            return overridenDefine;
        }
    });
})(window);

[dawesi]

sencha cmd is FREE, just download it?

https://www.sencha.com/products/extjs/cmd-download/

[mitchellsimoens]

sencha cmd is FREE, just download it?

https://www.sencha.com/products/extjs/cmd-download/

If you're replying to sarimarton, he said it may be licensing issues so whether it's free or a million, doesn't matter.

[dawesi]

If you're replying to sarimarton, he said it may be licensing issues so whether it's free or a million, doesn't matter.

If you're replying to me? Then you've assumed a lot, and may have missed the easiest solution due to that assumption.

The OP said 'I guess', which to most people who speak English, means either 1) they haven't asked, or 2) they assume as they have no idea what software is licensed in the org (so my comment is very helpful in this case as it MAY be able to be installed)

If they don't have it now, that doesn't confirm they can't. (assumption like that can lead to years of not having a tool that if you asked you could have had installed).

cmd is far superior to using your own manual methods, and even if you can only have it installed on a dev server or staging server and run it from there, it's worth asking for, especially as it is a productivity tool. (and it's free, so no budget issues politically).

so I reassert to @sarimarton to talk to the appropriate people to ask if it can be installed, as this would 1) improve productivity 2) improve workflow 3) is the right tool for the job

;-)

@sarimarton - I'd try and get cmd installed using the above, then if you can't then you're going to be wasting a whole load of time doing it manually. Can you confirm if you are able to get cmd installed or not?

[mitchellsimoens]

If you're replying to me? Then you've assumed a lot, and may have missed the easiest solution due to that assumption.

I mentioned you so make no mistake, I was reply to you.

The OP said 'I guess', which to most people who speak English, means either 1) they haven't asked, or 2) they assume as they have no idea what software is licensed in the org (so my comment is very helpful in this case as it MAY be able to be installed)

First, the OP never said "I guess", sarimarton did. Also, since we don't know everything with them just that it may be licensing, that's all you can go off of unless you want to assume. So no, I didn't assume anything, I went with the only data point that was available.

If they don't have it now, that doesn't confirm they can't. (assumption like that can lead to years of not having a tool that if you asked you could have had installed).

Just randomly coming by to say it's free doesn't get you this confirmation either. Also, commercial license doesn't mean paid so I'm not sure why you came by to say it's free. It has always been free so your comment gave nothing to help.

cmd is far superior to using your own manual methods, and even if you can only have it installed on a dev server or staging server and run it from there, it's worth asking for, especially as it is a productivity tool. (and it's free, so no budget issues politically).

So speaking of assuming things... you are assuming Cmd is far superior to what someone else can create and that budget would be a concern to them anyway. Sencha doesn't have the only smart people working for them.

1) improve productivity

assumption

2) improve workflow

assumption

3) is the right tool for the job

assumption

[sarimarton]

@dawesi, Thanks, I was unaware of this part. Sencha Cmd can be available inside our firm, however I need to initiate an onboarding process (internet is white-listed, and downloads don't work here). It's a financial company, and above positioned IT maintainers don't favor Sencha Cmd for some reason. I'll wait for their full-Node tooling release coming with v7 and will try to onboard it.