Yii Framework Forum: [EXTENSION] ExtendedClientScript - Reduce your page loading times - Yii Framework Forum

Jump to content

  • (5 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] ExtendedClientScript - Reduce your page loading times Rate Topic: ***** 1 Votes

#1 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 11 March 2009 - 06:46 PM

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.
0

#2 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,900
  • Joined: 04-October 08
  • Location:DC, USA

Posted 11 March 2009 - 07:27 PM

Excellent!
0

#3 User is offline   zdcgh 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 10-March 09

Posted 11 March 2009 - 08:22 PM

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

#4 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 11 March 2009 - 11:13 PM

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

#5 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 290
  • Joined: 20-November 08

Posted 12 March 2009 - 01:56 AM

:) nice,
and whether is something similar for HTML code?
0

#6 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 12 March 2009 - 02:12 AM

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)

0

#7 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 12 March 2009 - 03:16 AM

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.
0

#8 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 12 March 2009 - 05:02 AM

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();

0

#9 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 12 March 2009 - 07:01 AM

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

Added additional isset test to prevent this.
0

#10 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 12 March 2009 - 09:35 AM

Do you have the google code SVN?
0

#11 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 12 March 2009 - 10:22 AM

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
0

#12 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 12 March 2009 - 11:53 PM

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>

0

#13 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 13 March 2009 - 03:50 AM

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.

0

#14 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 13 March 2009 - 05:49 AM

Thanks!

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

#15 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 19 March 2009 - 06:15 PM

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++ ;)
0

#16 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 23 March 2009 - 04:01 AM

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?

0

#17 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 25 March 2009 - 06:52 PM

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.


0

#18 User is offline   mocapapa 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 428
  • Joined: 04-January 09
  • Location:Tokyo, JAPAN

Posted 26 March 2009 - 05:15 AM

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?
0

#19 User is offline   Maxximus 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 146
  • Joined: 24-November 08
  • Location:Spain

Posted 26 March 2009 - 06:40 PM

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.
0

#20 User is offline   trevis 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 11-April 09

Posted 12 April 2009 - 02:27 PM

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.
0

Share this topic:


  • (5 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users