Compressing and combining files with JavaScriptMVC
Unfortunately the images to this post were lost during the migration from Blogengine.Net to WordPress
This is the third article on JavaScriptMVC, so if you’re interested in more these are my previous posts on the subject:
In these previous posts I’ve shown you the MVC capabilities of the framework, now I would like to look into its combining and compressing features. By now you should be familiar with the js.bat command file which comes with JavaScriptMVC. If this doesn’t ring a bell, please read my previous posts or go to the JavaScriptMVC website.
Justin, one of the co-authors of JavaScriptMVC, mentioned in the comments of my previous posts that reducing HTTP requests is the number one performance enhancement recommendation by the Yahoo performance team. They even have a list of best practices for speeding up your website. JavaScriptMVC can help you combining your javascript files, external files as well as files generated by the framework. It’s actually very easy to do. To reference your JavaScriptMVC project in your HTML page you use the following code:
<script language="javascript" type="text/javascript" src="../../jmvc/include.js?tab_manager,development"></script>
At this moment JavaScriptMVC is running in development mode, which means no combined files, no compressing. It loads up the files in your browser just as you created them. This can be easily checked with Firebug. Load up your page which references the javascript in Firefox and enable the Firebug Script tag. If you open up the list of script files you’ll get something like this:
All files should be in this list: controllers, external resources, … This comes in very handy when developing and debugging. But lots of different files are loaded so performance wise this is not the way to go. Fortunately we have JavaScriptMVC to help us. You can load the production version of your code by using the following HTML code:
<script language="javascript" type="text/javascript" src="../../jmvc/include.js?tab_manager,production"></script>
Notice that the ‘development’ parameter has been changed to ‘production’. That’s pretty easy huh? Now let’s reload the webpage in Firefox and see what the result is.
Quite a surprise! We went from twenty or more javascript file to only two files being loaded: index.js and production.js, both are provided by JavaScriptMVC. But how and when is the production.js file created? It is done manually using the js.bat command file once again. You can compress and combine all your files using this command:
js apps/{application_name}/compress.js
So if we take the example of the previous post, to generate the production file for our Tab Manager:
js apps/tab_manager/compress.js
This will combine and compress all your files referenced by JavaScriptMVC into the production.js file. Whether it’s a controller, a model or an external resource it doesn’t matter. Even jquery itself is combined into this file when referenced as a resource in your JavaScriptMVC application. It doesn’t matter if the original file already has been minified, this all just works.
As you can see the framework offers you a great way to enhance the performance of your web application without much effort.