Results 1 to 9 of 9

Thread: How to improve the load time of ExtJS 6.6 Application

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    India
    Posts
    38
    Vote Rating
    4
      0  

    Default How to improve the load time of ExtJS 6.6 Application

    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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,307
    Vote Rating
    1478
      0  

    Default

    Are you loading a built (compressed and obfuscated) version of the app? Are you loading off a CDN?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    889
    Vote Rating
    178
      0  

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    17
    Vote Rating
    0
      0  

    Default

    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:

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

    Code:
    /**
     * 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);

  5. #5
    Sencha Premium User dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,160
    Vote Rating
    44
      -1  

    Default

    sencha cmd is FREE, just download it?

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

    Sencha Specialist / Sencha MVP
    ExtJs Developer + Contributor since 0.2.2 - Champion of the per developer license.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,307
    Vote Rating
    1478
      0  

    Default

    Quote Originally Posted by dawesi View Post
    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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #7
    Sencha Premium User dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,160
    Vote Rating
    44
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    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?
    Cloud Application Architect

    Sencha Specialist / Sencha MVP
    ExtJs Developer + Contributor since 0.2.2 - Champion of the per developer license.

  8. #8
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,307
    Vote Rating
    1478
      0  

    Default

    Quote Originally Posted by dawesi View Post
    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.

    Quote Originally Posted by dawesi View Post
    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.

    Quote Originally Posted by dawesi View Post
    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.

    Quote Originally Posted by dawesi View Post
    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.

    Quote Originally Posted by dawesi View Post
    1) improve productivity
    assumption

    Quote Originally Posted by dawesi View Post
    2) improve workflow
    assumption

    Quote Originally Posted by dawesi View Post
    3) is the right tool for the job
    assumption
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #9
    Sencha User
    Join Date
    Jan 2008
    Posts
    17
    Vote Rating
    0
      0  

    Default

    @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.

Similar Threads

  1. Application load time on Android 2.2.3
    By pulliags in forum Sencha Architect 2.x: Help & Discussions
    Replies: 6
    Last Post: 23 May 2012, 1:00 PM
  2. how to improve start up load time
    By msaspence in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 17 Jan 2012, 2:35 AM
  3. Improve dramatically your app load time
    By Raulvadillo in forum Ext GWT: Help & Discussion (1.x)
    Replies: 3
    Last Post: 24 Feb 2010, 4:26 AM
  4. To Improve loading time of EXT Js Application
    By rdx_guy in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 23 Jul 2008, 9:05 PM
  5. How can I improve load time of BasicDialog
    By cyberlogi in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 13 Sep 2007, 9:08 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •