Why Does sencha touch take so long to load?

1
votes

I used Sencha 1 in the past and I am going now for Sencha Touch 2... And I am interested in using Sencha Cmd...

So... I did the basic sencha command: sencha generate app Nameofmyapp path/to/myapp

And when I try to load the website... it takes over 10 seconds to load (and it has no functionalities). I have seen other people having the same issues than me, and I found the most useful answer here (and it solved the problem): Sencha Touch 2.2.0 loads very slowly. Is it normal?

But it's nonsense... Is it not possible to make it run faster without needed to minify everything? Is there something Sencha cmd does that I should erase because it's too heavy and useless? Should I not use Sencha cmd?

1
extjssencha-touchsencha-cmd
Check if you are using dynamic loading, it is done for debugging mode. However there is a command to build which should make it quick for production – Vu Nguyen

1 Answers

2
votes

Well, I think the minification isn't the problem, rather that all components (wether you use them or not) are loaded from separate files. The hundreds of requests take time. When you build your app with sencha app build production all (and only) the required components are concatenated into one big file that loads quite rapidly.

Have a look at the docs at Using Sencha Cmd with Sencha Touch that state

Sencha Cmd automates all optimizations for your application, including the following:

  • Resolving dependencies required by the application and only including exactly what is used for optimal file size/performance.
  • Enabling HTML5 application cache via automatic generation of "cache.manifest" and resources checksum.
  • Minifying all JavaScript and CSS assets.
  • Storing all JavaScript and CSS assets inside local storage on first load and patching them via delta updates between releases.

As a result, your production build can load instantly on subsequent access and updates on the fly with minimal network transfer.

Edit: There is a way to speed up development by changing sencha-touch.js to sencha-touch-all.js in your app.json file under "js". Next use the Sencha Touch Cmd command sencha app refresh which updates your bootstrap.js file. Now all components are loaded from one single file. You need to change this back before building your app though, otherwise all components will end up in your build even the ones you are not using.