[Maxximus]

With the ExtendedClientScript you can combine / compress your used JS and CSS files, thus dramatically speed up page loading (or at least get a good speed grade in YSlow ).

The Extension is transparent, so no need for code changes. Just set it up in your config file. Almost all parameters can be set there.

For compression it will use JSMin and CssMin in extensions (included in zip).

Some (CSS) limitations:
- Compressing CSS can have influence on your browser hacks.
- Using relative urls in CSS can give issues.

Some tips:
Try to load the same scripts in the same order on every page, to make good use of the users' browsercache, and to decrease the number of generated files.
You can exclude scripts in config, so some rarely used scripts can be excluded from compression.

Please tell me your findings!

Download here.

Aug. 31, 2011: New version 0.9.0, using CssMin ands several suggestions found in this thread. Also moved to extensions, with JsMin and CssMin in subdirs.

[qiang]

Excellent!

[zdcgh]

The file is corrupted after downloaded,would you pls help check?

[mocapapa]

Though I do not know the reason, the file seems to be compressed doubly.

[qwerty]

nice,
and whether is something similar for HTML code?

[mocapapa]

I have installed `components/ExtendedClientScript.php`, `extensions/jsmin/*` and 'extensions/csstidy/*`, but found a following error message.:'(

Quote

PHP Error

Description



Undefined offset: 0

Source File



/var/www/html/yii/demos/yii-blogdemo-enhanced-extension/protected/components/ExtendedClientScript.php(99)

[Maxximus]

Re-uploaded as zip, seems to unzip fine.

@zdcgh: Could you try it again with the zipped file?

@mocapapa: Probably your Yii version is older than SVN 813. Before that $scriptFiles was private, not protected.

[mocapapa]

Quote

@mocapapa: Probably your Yii version is older than SVN 813. Before that $scriptFiles was private, not protected.

No, my version is SVN 814.

I grepped the framework directory and found following.

Quote

../../../framework/web/CClientScript.php:      protected $scriptFiles=array();

[Maxximus]

Ah, found it. You're running with E_ALL error reporting.

Added additional isset test to prevent this.

[mocapapa]

Do you have the google code SVN?

[Maxximus]

Still no luck? Is the error on the same line? Could you post the line? I use Yii SVN: http://yii.googlecod...vn/branches/1.0

[mocapapa]

Quote

Do you have the google code SVN?

Sorry, I was confused that you had attached your code to the article.

Quote

Still no luck? Is the error on the same line? Could you post the line? I use Yii SVN: http://yii.googlecod...vn/branches/1.0

Yeah, there is no error this time and my application works fine. After I compare two HTML before/after enabling this extension, only one line differs. Is it expected?

Quote

  // -->

  </script>

 

! <link rel="stylesheet" type="text/css" href="/demos/yii-blogdemo-enhanced-extension/assets/4b0d6480/calendar.css" />

  <title>blog - Post</title>

 

  </head>

--- 22,28 ----

  // -->

  </script>

 

! <link rel="stylesheet" type="text/css" href="/demos/yii-blogdemo-enhanced-extension/assets/8e71a30/c_a9db2e66ee865f3702bb4da440f176f9.css" />

  <title>blog - Post</title>

 

I am not sure what the condition of this extension is. Does this work with the code like this?

protected/views/layouts/main.php:

<script type="text/javascript" src="/demos/yii-blogdemo-enhanced-extension/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="/demos/yii-blogdemo-enhanced-extension/js/highslide/highslide.js"></script>

[Maxximus]

The ExtendedClientScript works with CClientScript. So it will combine and compress files registered with the CClientScript routines.

For example, in your controller (or view/layout) you have:

		$cs=Yii::app()->clientScript;

		$cs->registerCoreScript('autocomplete');



		$cs->registerScriptFile('/assets/js/plugins/tooltip/jquery.tooltip.js', CClientScript::POS_HEAD);

		$cs->registerScriptFile('/assets/js/ui/ui.core.js', CClientScript::POS_HEAD);

		$cs->registerScriptFile('/assets/js/ui/ui.tabs.js', CClientScript::POS_HEAD);

Normally the above will add about 6 Javascript tags to your head section after calling render().

Without changing the above code, using ExtendedClientScript will automatically combine these files to one, and compress them with JSMin. After that you will have only one Javascript tag rendered in your head section.
This saves 5 HTTP roundtrips from client to server, and reduces the amount of data transferred to the client. This will give your pages a more responsive feel, and saves you a lot of data transfer on top.

Same goes for your CSS files registered with registerCssFile() (or registerCoreScript()). All separate CSS files will be combined, and CSSTidy will compress and correct your CSS.

For CSS files with relative url's (like jQuery UI themes) you need to convert the url's to be a relative to root url. I might add an additional routine to automatically convert the relative url's in a later version.

[mocapapa]

Thanks!

There seemed to be no description there in terms of registerScriptFile, because it is too natural.

[mocapapa]

Thank you again for a nice extension. I have changed my application that can be acquired from the google code using your ExtendedClientScirpt extension. Karma++

[mocapapa]

BTW, when I tried to generate a module using a shell command such as '../../framework/yiic shell' under the application directory, I got an error as below.

Quote

<h1>PHP Error</h1>



<h3>Description</h3>

<p class="message">

filemtime(): stat failed for /assets/8e71a30/jquery.js</p>



<h3>Source File</h3>

<p>

/var/www/html/yii/demos/yii-blogdemo-enhanced-modules/protected/components/ExtendedClientScript.php(189)</p>

Actually when I turned ExtendedClientScript configuration OFF in the config/main.php, there is no error. Does this error come from the ExtendedClientScript?

[Maxximus]

Hmm yes, I have the same issue. This is caused by using $_SERVER['DOCUMENT_ROOT'] if the filePath and basePath are not set in the config.

In a command line environment they are not available unfortunately. Currently I have no other solution than defining basePath and filePath in config.

I'm open for other suggestions.

[mocapapa]

I just tried following code but got no success :'(

dirname(Yii::app()->getRequest()->getScriptFile())

I think ExtendedClientScript is for a performance purpose, how about to disable it when $_SERVER['DOCUMENT_ROOT'] is undefined?

[Maxximus]

No, you probably can't use that. Have a couple of options for you:

In config/main.php:

if($_SERVER['DOCUMENT_ROOT']=='') define('CLI', true);

...

return array(

...

	'components'=>array(



	    'clientScript'=>array(

			'class'=>'application.components.ExtendedClientScript',

			'combineFiles'=>defined('CLI')?false:true,

			'compressCss'=>defined('CLI')?false:true,

			'compressJs'=>defined('CLI')?false:true,

		),

...

Second option in config/console.php:

$_SERVER['DOCUMENT_ROOT'] = dirname(__FILE__).DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'..';

Think the second is the nicest since it's only for cli, so no performance hit at all.

Found that the Yii class CFileHelper suffers too if you use that in your application, when using cli.

[trevis]

First off, thanks Maxximus for the great extension.

I made some slight modifications to support themes a little, with a sort of cascading file system.  I'm not sure that this is the right place to do this, or even if its the "correct" way of doing it, as I have only been using Yii for a few days.  I just figured I would share my code in the hopes that someone else finds it useful, or could point out its flaws.

Change in combineAndCompress:


Total combinAndCompress function:



What this does is allow you do use something like:

and it will use /assets/css/admin/main.css by default, but if a theme is enabled, and the file /themes/THEMENAME/assets/css/admin/main.css exists it will used the theme version instead.

Hopefully this is useful to someone.