Yii 1.1: dynamicres

Compresses several CSS or JS in a single file (compressed) to minimize number of requests and maximize performance
22 followers

Dynamic Res

Compress CSS or JS files in only one file to increase performance and decrease request of many files. This extension (version > 1.3) use CssMin and JavaScriptPacker to compress.

Requirements

assetManager (native)

Usage

  • Dowload the extension and put correctly in the extension folder
  • Add the following lines in your configuration file:

main.php 'components'=>array(

...
        'dynamicRes'=>array(
            'class' => 'application.extensions.DynamicRes.DynamicRes',
            'urlConfig' => array( // Its fix Css, and convert Url to RealName 
                'baseUrl'  => '/', // Url of your Site (ending with /), modify it if you use subdomain
                'basePath' => dirname(__FILE__).'/../../', // path of your site (ending with /) (No Change This)
            )
        ),
...

In your layouts puts

...
<head>
    <?php Yii::app()->dynamicRes->registerCssFile(Yii::app()->request->baseUrl . '/css/style.css'); ?>
    <?php Yii::app()->dynamicRes->registerCssFile(Yii::app()->request->baseUrl . '/css/reset.css'); ?>
    <?php Yii::app()->dynamicRes->registerCssFile(Yii::app()->request->baseUrl . '/css/common.css'); ?>
</head>
...
</html>
...
<?php Yii::app()->dynamicRes->saveScheme(); // use This function on end of layout or use on afterRender of your Controller Class (Auto SaveScheme) ?>

Remember, Do not save scheme again in your views or other files

Auto SaveScheme

to facilitate, you can call the function saveScheme on function "afterRender" of controller. Example:
components/controller.php

<?php
class Controller extends CController {    
    protected function afterRender($view, &$output) {
        Yii::app()->dynamicRes->saveScheme();
    }
}

Cache and Compress with GZIP

All files are placed in your asset folder, to cache use htaccess. (do not worry about the name of the files, they are switched when the original file is modified). Example of cache:
.htacces

<FilesMatch "\.(js|css)$">
    Header set Expires "Sun, 15 Feb 2020 20:00:00 GMT"
</FilesMatch>

or

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

or

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

Resources

Download: Click Here To Download Extension

Total 20 comments

#18157 report it
Ingwie Phoenix at 2014/09/18 06:17am
Awesomeness!

This extension turned 5-6 script and link tags into one! However, I am still facing a few problems...

For one, when I minify socket.io.js, I get a JS error int he console about an unexpected token. Also with pick-a-color-1.2.3.min.js.

Is there a way to add configuration options to DynamicRes to:

  • Determine which files are idneed minified before added to the "big file"?
  • Change the JS packer individually or generally?

You could look at http://www.yiiframework.com/extension/escriptboost/ for some good JS packers. This extension does not provide a register{...}File set of functions, which is why i am using DynamicRes and EScriptBoost side-by-side.

I also have another problem about CSS. I am using WingStyle ( https://github.com/IngwiePhoenix/WingStyle ) to generate my main CSS. I didn't figure out a good way to "automatically generate and update" a static CSS from it, yet. So is there an option to append a CSS file to the array verbatim, without it getting either minified or even added to the big file?

You can see my current code for this here: http://git.ingwie.me/ingwie/bird3/blob/master/protected/components/Controller.php

Would be great if you could help me out here ^_^ Kind regards, Ingwie.

#7327 report it
elsonwu at 2012/03/14 09:46am
I have make some modification

here is my modification.

'clientScript'=>array(
    'class'=>'application.extensions.DynamicRes.DynamicRes',
    'urlConfig'=>array( // Its fix Css, and convert Url to RealName 
        'baseUrl'=> '/', // Url of your Site (ending with /), modify it if you use subdomain
        'basePath'=>WWW_PATH.'/', // path of your site (ending with /) (No Change This)
    ),
    'debug'=>true,
),
//extends this class from CClientScript, then no need to modify any view file.
class DynamicRes extends CClientScript {
 
    //compress or not.
    //it's important for development.
    public  $debug = false;   
 
    public function registerCssFile($urlName, $media='') {
        if($this->debug)
            return parent::registerCssFile($urlName, $media);
        else
            return $this->registerFile($this->cssList, $urlName);
    }
 
    public function registerScriptFile($urlName, $position=self::POS_HEAD) {
        if($this->debug)
            return parent::registerScriptFile($urlName, $position);
        else
            return $this->registerFile($this->jsList, $urlName);
    }
 
    public function saveScheme() {
        if( ! $this->debug)
        {
            if(count($this->jsList)>0) {
                //do not loading the same js files.
                $this->jsList = array_unique($this->jsList);
                $fileJs = $this->saveFileScheme($this->jsList, 'js');
                parent::registerScriptFile($fileJs);
            }
            if(count($this->cssList)>0) {
                //do not loading the same css files.
                $this->cssList = array_unique($this->cssList);
                $fileCss = $this->saveFileScheme($this->cssList, 'css');
                parent::registerCssFile($fileCss);
            }
            $this->jsList = array();
            $this->cssList = array();
        }
    }
}
#5780 report it
Jay Haase at 2011/11/12 10:18am
Compress JS files Used by YII and Extensions

Wow, this extension has sped up my site (+1). Thanks for sharing it.

Can I also use this extension to compress these JavaScript files used by Yii and extensions?

For example: jquery.min.js, jquery.yii.js, query.yiigridview.js, etc.

Thanks, Jay.

#4964 report it
sn4k3 at 2011/09/01 08:12pm
Works

now it works correctly

i always had problems with other cahce extensions because path and script errors on minify because a use of massive scripts ... but that works correctly

thanks and good job :)

just a resquest: minify inline js and css processed by Yii eg. Yii->app()->clientScript->javascript(); and ->css

#4952 report it
adsmail27 at 2011/08/31 09:36pm
Bug Fixed (Version 1.6)

Bug Fixed,

now, baseUrl config is absolete, use only:

'urlConfig' => array( // Its fix Css, and convert Url to RealName 
                'basePath' => dirname(__FILE__).'/../../', // path of your site (ending with /) (No Change This)
            )
#4926 report it
sn4k3 at 2011/08/29 10:01pm
another bug

css:

.sf-sub-indicator {
    position:       absolute;
    display:        block;
    right:          10px;
    top:            17px; /* IE6 only */
    width:          10px;
    height:         10px;
    text-indent:    -999em;
    overflow:       hidden;
    background:     url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

RESULT:

indicator{position:absolute;display:block;right:10px;top:17px;width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url(/yii/ecorifa/themes/default/resources/css/"../images/arrows-ffffff.png") no-repeat -10px -100px}

also happen in more situations

sub-indicator{background-position:-10px 0}.sf-shadow ul{background:url(/yii/ecorifa/themes/default/resources/css/'../images/shadow.png') no-repeat bottom
#4915 report it
adsmail27 at 2011/08/28 10:59am
Wrong Config

You need to config Url Base of Your Site, your baseUrl is "/yii/escorifa/"

'urlConfig' => array( // Its fix Css, and convert Url to RealName 
                'baseUrl'  => '/yii/escorifa/', // Url of your Site (ending with /), modify it if you use subdomain
                'basePath' => dirname(__FILE__).'/../../', // path of your site (ending with /) (No Change This)
            )
#4867 report it
sn4k3 at 2011/08/22 09:33pm
not working

thanks i now see where its the error

dynamicRes: FUNCTION DEBUG CALLED 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\hoverIntent.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\jquery.cycle.all.min.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\jquery.easing.1.3.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\superfish.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\supersubs.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\validation\jquery.validationEngine-pt.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\validation\jquery.validationEngine.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\js\jquery\jquery.formalize.min.js dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\css\screen.css dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\themes\default\resources\css\form.css dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\themes\default\resources\css\style.css dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\themes\default\resources\css\site.css dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\css\jquery\validation\validationEngine.jquery.css dont exists. 
- File D:\wamp\www\yii\ecorifa\yii\ecorifa\resources\css\jquery\formalize.css dont exists.

but why it repeat path? if im using yii base url

$cs->registerCssFile(Yii::app()->theme->baseUrl.'/resources/css/site.css');
    $cs->registerCssFile(BASEURL.'/resources/css/jquery/validation/validationEngine.jquery.css');
    $cs->registerCssFile(BASEURL.'/resources/css/jquery/formalize.css');
#4866 report it
adsmail27 at 2011/08/22 09:17pm
not working?

Upgrade to "DynamicRes 1.5" and use function debug();

<?php Yii::app()->dynamicRes->debug(); ?>

use this after include yours files (in your view)

#4852 report it
sn4k3 at 2011/08/21 07:36pm
Still not working

i dont know why, but it still not working ....

all placed with savescheme but i got no results :(

my code:

<?php
    //$cs=Yii::app()->clientScript;
    $cs=Yii::app()->dynamicRes;
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/hoverIntent.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/jquery.cycle.all.min.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/jquery.easing.1.3.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/superfish.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/supersubs.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/validation/jquery.validationEngine-pt.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/validation/jquery.validationEngine.js');
    $cs->registerScriptFile(BASEURL.'/resources/js/jquery/jquery.formalize.min.js');
 
 
    $cs->registerCssFile(BASEURL.'/resources/css/screen.css', 'screen, projection'); // blueprint CSS framework
    //$cs->registerCssFile(Yii::app()->theme->baseUrl.'/resources/css/print.css', 'print'); // blueprint CSS framework
    $cs->registerCssFile(Yii::app()->theme->baseUrl.'/resources/css/form.css');
    $cs->registerCssFile(Yii::app()->theme->baseUrl.'/resources/css/style.css');
    $cs->registerCssFile(Yii::app()->theme->baseUrl.'/resources/css/site.css');
    $cs->registerCssFile(BASEURL.'/resources/css/jquery/validation/validationEngine.jquery.css');
    $cs->registerCssFile(BASEURL.'/resources/css/jquery/formalize.css');
    //$cs->registerCssFile('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/ui-lightness/jquery-ui.css');
?>
#4834 report it
adsmail27 at 2011/08/20 11:21am
Wrong Config

change config to

...
        'dynamicRes'=>array(
            'class' => 'application.extensions.DynamicRes.DynamicRes',
            'urlConfig' => array( // Its fix Css, and convert Url to RealName 
                'baseUrl'  => '/', // Url of your Site (ending with /), modify it if you use subdomain
                'basePath' => dirname(__FILE__).'/../../', // path of your site (ending with /) (No Change This)
            )
        ),
...

note: basePath and baseUrl end with "/"

#4830 report it
sn4k3 at 2011/08/19 10:19pm
Not working to me

hi,

i use it in controller like it say on setup

protected function afterRender($view, &$output) {
        Yii::app()->dynamicRes->saveScheme();
    }

so i have to useit in view instead controller?

#4828 report it
Pomstiborius at 2011/08/19 03:30pm
Great job

Everything works fine. Will let you know how it works with big css/js files after some tests.

#4827 report it
adsmail27 at 2011/08/19 02:20pm
not working?

use "Yii::app()->dynamicRes->saveScheme();" after yours "Yii::app()->dynamicRes->registerCssFile(Yii::app()->request->baseUrl . '/css/style.css')"


Version 1.4 > CssMin Bug Fix 4 and Fix Bug in double "saveScheme"

#4824 report it
sn4k3 at 2011/08/19 11:47am
Not working to me

Hi,

i have installed this, and follow all setups but dont work for me in view page source, its blank of scripts or css includes

Thanks

#4821 report it
Pomstiborius at 2011/08/19 06:14am
One more thing...

I found bug in registerScriptFile(), but it's already fixed. Nice. :) But there is something wrong with CssMin - maybe because my example was for CssMin 2.0.1 and you are using CssMin 3.0 (didn't know it is out), so entire script breakes. You have to change line 106 to this:

return CssMin::minify($content, array(), array('CompressUnitValues' => true));

BTW have you ever tested JavaScriptPacker for large files? I've tried a lot of libraries and some of them (JsMin+) caused memory leak while processing big files. Don't have time to try this now, maybe someone else will test.

#4817 report it
adsmail27 at 2011/08/18 08:46pm
Bug Fixed (Version 1.3)

Fixed bug in "registerScriptFile"


compress of css is using "CssMin" compress of js is using "JavaScriptPacker"

#4815 report it
Pomstiborius at 2011/08/18 04:54pm
CssMin

I will test it tomorrow and see if there are any other bugs. :)

About CssMin - it is really simple.

function minify($code) {
    require_once('CssMin.php');
    return CssMin::minify($code, array('compress-unit-values' => true));
}

As you see you only need to include CssMin file and call CssMin::minify($code, $options) function. You may want to check out $options, but that's all.

#4814 report it
adsmail27 at 2011/08/18 03:55pm
Bug Fixed

Thanks, bug in parserCss is fixed now

I will study this CssMin to replace compress

#4812 report it
Pomstiborius at 2011/08/18 02:27pm
Another bug

Hello again. :) It seems that you have one more bug (or more, we will see :) ) - in parserCss() function, line 37. Everything is ok if you use relative paths. Problem shows when you use absolute paths, for example:

background: url(/images/default/top-menu.png) repeat-x;

Line 37 changes it to something like that (/css is my original folder for css files):

background: url(/css//images/default/top-menu.png) repeat-x;

Also you should consider replacing compressContent() with something better. CssMin is great class. JS compressing would be nice too - Vince developed nice extension, google-complier-extension. Think about this. ;)

Leave a comment

Please to leave your comment.

Create extension