How to Use Yii clientScript scriptMap to speed up your website

My pet project site was running quite slowly due to the large number of http request going and waiting for many different stylesheets and scripts that my site required to have. Certainly, there are available php script that can combine all my stylesheets and scripts into 1 big file but doing this would had already use up certain amount of resources needed to perform such compilation. Yii had already provide such method within their framework which is called scriptMap. However, scriptMap is pretty confusing and i did spend sometime figuring it out before finding it useful. Hence, writing this down would definitely serve a good purpose in the future.

What is Yii scriptMap

Yii scriptMap is a method within the clientScript class that allows you to map a particular script or stylesheet into a desirable file. It is like htaccess rule to perform redirect whenever you see a particular URL, redirect it. The same concept apply to scriptMap. Whenever you see a particular script or stylesheet, print the one that i want instead of the one you see.

How Yii scriptMap works?

I believe there are a few things to point out on Yii scriptMap before actually show you the snippet of scriptMap.

• Yii scriptMap do not print out your stylesheet or script for you
• Yii scriptMap doesn't work like registerScriptFile or registerCssFile (which print out your file)
• Yii scriptMap will not map if it doesn't see the script or stylesheet you have placed on the function. Hence, you still see the same script/stylesheet.
• Yii scriptMap directory start below the directory level of 'protected'. Hence, its at the level where you see all the css/assest/js/theme folder.
• Please ensure the file you are mapping to, had already exist.

Once you understand the above. It is time to show you how this is being done.

Firstly, you would have to initialize the clientScript class then register all your stylesheet and script like you usual do.

$cs=Yii::app()->clientScript;
$cs->registerScriptFile(Yii::app()->request->baseUrl .'/js/html5.js');
$cs->registerCssFile(Yii::app()->request->baseUrl .'/css/reset.css');

Something like the one shown above. Once you have done that, you will see your files showing up on your site. However, these are the actual files, you want the minimized one or the one that has optimized. Therefore, you would use scriptMap as shown below,

	$cs->scriptMap=array(
		'jquery.js'=>'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
		'jquery.min.js'=>'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
		'html5.js'=>'/js/all.js',
		'reset.css'=>'/css/all.css'
	);

In case you are stuck here like i was, let me explain some of the more important thing above. Firstly, scriptMap is looking for the name of your script or stylesheet and NOT the path. Secondly, the file that you are mapping to (in my case its all.js and css.js). They must be created by yourself and place all the require scripting into it.

In short, if you have notice what i did with the jQuery library for my scriptMap, you would have guess what sort of functionality is scriptMap providing you. It is basically saying "if you see this name, don't show it, print the one i provide you instead :)). Cheers! Hope it helps.