HTML and CSS Reference
In-Depth Information
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.
Just like concatenation, you can also minify your JavaScript automatically at
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
''Compress Javascript'' button.
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
following code.
<head>
<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;"/>
<title>Mo Memo</title>
<link rel="stylesheet" type="text/css" href="css/mobile.min.css" />
<link href='
http://fonts.googleapis.com/css?family=Arimo' re
l='stylesheet'
type='text/css'>
<link rel="apple-touch-icon-precomposed" href="img/home-screen-icon.png">
</head>
Caching
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.
