HTML and CSS Reference
Have a look at the size of your app.dev.js file by right-clicking on it in Aptana
and selecting Properties. It should weigh in at around 54,000 bytes, which is
about 53KB. You can further reduce the size of the file for production by running
it through a minification script.
server-side or using YUI compressor. For the example in this topic, you will use
Create a new file within js/ called app.min.js . This will contain your production-
ready minified code. Copy the code from app.dev.js and paste it into the text
Copy the compressed output and paste it into app.min.js . Save the file, and
then right-click on it in the app explorer and select Properties. You should see a
big reduction in the file size, from about 54,000 bytes down to about 24,318
bytes. That's a file size reduction of about a half.
You can also compress your CSS files using SASS by taking advantage of the --
style compress option. To do this, open up the terminal from the application
folder and enter the following command.
sass ./css/*.scss ./css/mobile.min.css --style compress
This will output a minified version of the CSS file to the CSS directory. To use it,
change the href of the CSS stylesheet in the head of index.html from
mobile.css to mobile.min.css . Your new head should now look like the
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi;"/>
<link rel="stylesheet" type="text/css" href="css/mobile.min.css" />
<link href=' http://fonts.googleapis.com/css?family=Arimo' re l='stylesheet'
<link rel="apple-touch-icon-precomposed" href="img/home-screen-icon.png">
All of the file-saving techniques work perfectly for reducing the amount of
bandwidth that your application takes up per page load. Now, wouldn't it be
perfect if the user only ever had to make a request for assets that changed only
once in a blue moon? You can do this with the cache manifest.