How to reduce the size of Sencha Touch Application? - sencha-touch

I am building a Sencha Touch application. Even the most basic application is of size 27 MB. Now I want to commit the code online. The touch folder inside the application is of 20 MB which is way too much.
So how can I compress my application and reduce the size of my application?

use sencha cmd to minify to one js file.
from the application's root in the terminal or command prompt, run "sencha app build production" or "sencha app build testing" dependent on if you want the source code minified also.
Make sure you have sencha cmd installed first.
Also make sure each of your classes is requiring only the source components you need. What you're doing right now is deploying every single line of sencha touch, whereas in reality, if you're not using the carousel component, for instance, you don't need this in your deployed app.
Requiring in the classes you need only, and then building the app file in this way, will give you a nice compact single js file that is many many times smaller.

At first, what do you want is not clear. Why you want to compress the application?
If you want to run it on device, you can minify it using sencha cmd. From within your application folder run this command
sencha app build production
and you can see your app size(build version) will reduce drastically. Further you can make apk and/or ipa with this build version only.

Related

Minify all JavaScript Files in the Sencha App

I have a Sencha Application which contains Models, Controllers, Views etc. I need to minify all models, views, controllers, app Javascript file into a single JavaScript file. Any recommendation of tools on a Mac.
Sencha Cmd has an inbuilt function for this. Open up your command prompt, change into the root directory of your project and run:
sencha app build production
And it will generate a minified version of your app in YourApp/build/production/YourApp.
The answer is indeed sencha app build production
For a step by step here is an excellent blog post from Sencha
http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-1/
Its a three part blog post, you'll have fun following it, and in the third part it does make a build for production.
Here is a demo of how fast loads when is production build.
http://prosp-anonym111.rhcloud.com/simulador/build/production/reestructura/index.html
best regards

Sencha Cmd 4: minify the javascript code of ExtJS and Sencha Touch

I have developed two applications using ExtJS and Sencha Touch. I would like to minify the JavaScript code and create a single js file for all classes used in the applications (separately, I am trying to minify the code and not to build. My task doesn't depend on ExtJS or Sencha Touch).
I used sencha cmd verions 4 to do. It am facing some issues with both ExtJS and Sencha Touch application.
In ExtJS, It is not taking all the classes for minifying and creating a single js file. It is taking the classes which are mentioned in required method. If I want to minify the all the javascript classes, I will have to include all the classes in require method in app.js. This is not fair.
I used the following command. It is not giving any error
sencha -sdk <path-to-sdk> compile --classpath=<classpath> page -in index.html -out build/index.html -yui
In Sencha Touch, It is targetting for mobile environment (eg: Andriod, iPhone, windows, etc.). I am trying to compile and minify and not to package application.
Please let me know how to do.
This is working as intended. Sencha build process looks for dependencies (via require) and loads them accordingly, getting you the smallest build necessary. Good practice is to always set your requires.
To get around this, if you really want to just include all classes, you can add standalone requires to the top of the app. Since Ext.Loader can accept wildcards, you can just do Ext.require('App.model.*') and it will load all the individual model files, for example.

How do I speed up load times for Sencha Touch

I am currently developing a Sencha Touch application using Cloud 9 IDE. I created the app on my local machine and later imported the project to Cloud 9. Everything works fine but an annoyance that happens is the load times for my page are greater than a minute. I think it has to do with all the files that are being individually loaded.
What is the best way to speed up the sdk load times? I am unsure how to use the sdk tools and do not know if you can even install them into Cloud 9. Would it be better to abandon the sdk tools and load Sencha manually?
Key is to minify & aggregate all the JS & CSS so that less number of bytes are transferred in less number of http calls. Sencha Cmd has the feature to do all this and create a packaged build to load fast, here is what you have to do from your app directory:
sencha app build package
This will create .>build>package folder with minified version of your app.
For more details read http://docs.sencha.com/touch/2-1/#!/guide/command and look at this http://vimeo.com/55148644 for illustration

How can I speed up debugging in Sencha Touch?

I'd like to be able to speed-up the debugging process when building Sencha Touch apps. At the moment I have to disable caching as any changes I make to the source would not get updated when refreshing the application and I also want to persist breakpoints in Chrome.
How can I both cache the files that are unlikely to change but refresh those that do?
Currently, when I press Ctrl+F5, it takes 4-5 seconds to load the app. It's loading all the Sencha Touch required .js files as well as any for the app itself. I think what I would like to do is cache on a path basis, so any files on the sencha touch source folder are cached and not re-loaded, but app files aren't.
try using an application cache manifest you can learn to configure one here. Application cache is not for folders though but for files so you have to include all files that you want to be cached permanantly.

How can I compress Titanium Application Size after building it?

I built a Login application in which I have 3 Windows
Log In Windows
Registration Windows
After Log in details window about the user
In this application, the database stores data about user. The app is intended to be multi-platform & run on iPhone or Android.
When I install in device than it take 12MB or more Size (application size 12MB or more size).
How can I compress it?
Here are several things you can try:
Create a new Titanium project and deploy it to your device. This is likely the minimum size you can attain. Add this minimum size to the size of your Resources folder and the result should be around the same as 12mb. If so, there is little more you can do.
Check your Resources folder and remove anything that you don't want included in your app, such as .psd files. The build folders you mentioned in your comments have little to do with the actual app size.
Make sure you have not installed any modules. Check /Library/Application Support/Titanium/modules for any modules that shouldn't be there. I have 14 modules there by default, for example.
If you are very desperate, you can attempt to hack in Xcode to remove classes that you aren't using. See the responses by the "professional" developer here http://developer.appcelerator.com/question/133971/why-are-the-size-of-titanium-showcase-apps-so-small#answer-233668 This won't be easy and should only be attempted as a last resort.
In general however, there is no need to try too hard to reduce the file size. From my experience, even after adding a lot more windows and functionality, the file size barely increases by a couple of MB.
Also, note that your release file size can be smaller than the app you are testing on your device. See http://developer.appcelerator.com/question/126632/android-apk-filesize
From my experience with Android, if you are running the application on the device, vs. deploying the application, the app size is much larger. Try deploying and installing on device that way to see if it is any different. But Titanium already compresses the application.
Here are few questions which might become answer.
Are you using Mac for both Android and iPhone deployment. If so, the Android App would be of larger size compared to the same App deployed from Windows.
You might have splash screen, now go and check your folder here that you have any other JPEG files apart from the spash screen and ico file
\build\android\res\drawable
Which version of Titanium SDK are you using for building the Application? Try to compile the same Application using Titanium SDK 1.7.5, if you are using 1.8.1 and above.
Note: If you are trying to compile your App in Titanium SDK 1.7.5 for Mac, make sure you have XCode 4.2.1 for Lion and Not XCode 4.3.