Yii 1.1: escriptboost

Minify the javascript/css code of your application's assets and pages
28 followers

Introduction

Probably a lot of you would wonder why, having so many good extensions related to minifying/compressing/packing your javascript and css files around, here comes this guy offering us another solution.

I did check out all the extensions in our repository, just to name some of them:

All of them are great, but none were filling the requirements we had. I did not have any issue compressing all our files as our team, will use the YUI compressor jar file to create our compressed javascript versions and then use the wonderful mapping features of CClientScript. The issue was with the assets of external, or own developed, extensions and the javascript code that, even Yii own widgets, were writing to the POS_BEGIN, POS_END, POS_HEAD, POS_LOAD, POS_READY positions. Thats exactly what this library is doing: allowing Yii coders to minify those scripts.

Get the most up to date version from its own repository (at the end)

Requirements

You need to enable any caching mechanism in Yii in order to use it. For example:

'cache' => array(
    'class' => 'system.caching.CApcCache',
),

Library

The library comes with three flavors:

  • EScriptBoost Component
  • EClientScriptBoost Extension
  • EAssetManagerBoost Extension

EScriptBoost Component

This is a very easy to use component to compress your HTML, Javascript or CSS code at your will. The minifiers used are:

Usage

// this is a very simple example :)
// we use cache as we do not want to
// compress/minify all the time our
// script 
$js = Yii::app()->cache->get('scriptID');
 
if(!$js)
{
     $cacheDuration = 30;
     $js = <<<EOD
     // my long and uncompressed code here
EOD;
     // $js = EScriptBoost::packJs($js);
     // $js = EScriptBoost::minifyJs($js, EScriptBoost::JS_MIN_PLUS);
     $js = EScriptBoost::minifyJs($js, EScriptBoost::JS_MIN);
 
     // see Cache guide for more options | dependencies
     Yii::app()->cache->set('scriptID', $cacheDuration); 
}
Yii::app()->clientScript->registerScript('scriptID', $js);

That was troublesome right? No worries, if you don't really care about using JS_MIN, or JS_MIN_PLUS, you can use its helper function registerScript, it will handle all of the above automatically:

$js = <<<EOD
    // my long and uncompressed code here
EOD;
EScriptBoost::registerScript('scriptID', $js);

EClientScriptBoost Extension

EScriptBoost was good for the javascript code written by me but what about the ones written by Yii widgets? EClientScriptBoost was developed to solve that:

Usage

On your main.php config file:

'import' => array(
// ... other configuration settings on main.php
// ... importing the folder where scriptboost is
    'application.extensions.scriptboost.*',
// ... more configuration settings 
    ),
// ... other configuration settings on main.php
'components' => array(
     'clientScript' => array(
// ... assuming you have previously imported the folder 
//     where EClientScriptBoost is
         'class'=>'EClientScriptBoost',
         'cacheDuration'=>30,
// ... more configuration settings

Done! now, every time you or other component on your application registers some script, it will be minified and cached as you specify on your cache settings. Easy right?

EAssetManagerBoost Extension

But there was one more challenge to solve. Some extensions, widgets, etc, do publish a whole bunch of files in our assets that are not minified. How to solve that? This is where EAssetManagerBoost comes handy.

This extension does not only minify about to be registered javascript/css files, but also makes sure that the files do not match any of its $minifiedExtensionFlags. This way we can avoid to minify/compress files that do not require it.

Usage

Make sure you have deleted your previous assets folder contents.

'import' => array(
// ... other configuration settings on main.php
// ... importing the folder where scriptboost is
    'application.extensions.scriptboost.*',
// ... more configuration settings 
    ),
// ... other configuration settings on main.php
'components' => array(
    'assetManager' => array(
// ... assuming you have previously imported the folder 
      'class' => 'EAssetManagerBoost',
      'minifiedExtensionFlags'=>array('min.js','minified.js','packed.js')
        ),
// ... more configuration settings

Important Note There is a small drawback to use EAssetManagerBoost and is that the first time your application is requested, it will take a bit of time as it will go throughout all your asset files to be published and minify them.

Minifying CSS and/or HTML

EScriptBoost comes with a set of handy helper functions, among those minifyCSS and minifyHTML. They are very easy to use, for example with minifyCSS if you look at the code of EAssetManagerBoost lines 172-173, you will see a use of it:

@file_put_contents($dstFile, EScriptBoost::minifyCss(@file_get_contents($src)));

As you can see, you need to pass the CSS contents of a file or a script, in order to be minified. To minifyHTML is the same, you can get the contents returned by renderPartial to be minified or even do it with the whole view. How to be applied will depend on the requirements of the application and it needs to be carefully studied as that could slow down your application without the proper caching technique.

Please, check the reference links in order to get information about how to configure the minifiers included in this extension.

ChangeLog

  • Version 1.0.1 Included HTML Compression
  • Version 1.0.0 Initial public release

Resources

2amigOS!
web development has never been so fun
www.2amigos.us - under construction -

Total 13 comments

#15874 report it
le_top at 2013/12/25 06:13am
Updates

Hi

I patched the extension to detect and avoid trouble with cache aliasing across views and users.

https://github.com/mdeweerd/Yii-extensions/blob/patch-1/extensions/EScriptBoost/EClientScriptBoost.php

This patch also fixes the issue in the previous comment which is due to a change in the Yii Framework (the method signature changed).

#13824 report it
Matías J. Magni at 2013/06/28 11:39am
Error

I got this error:

PHP error

Declaration of EClientScriptBoost::registerScript() should be compatible with CClientScript::registerScript($id, $script, $position = NULL, array $htmlOptions = Array)

Why?

#12103 report it
Antonio Ramirez at 2013/02/27 09:56am
@all

EScriptboost now has a github repository.

Please, post your issues there, so i can handle them directly on the code.

Thanks!

#11918 report it
sseventysix at 2013/02/13 12:32am
Parse error: Missing ) in parenthetical in file '[inline]' on line 29

When activating EAssetManagerBoost... Any idea what that could be?

#10685 report it
David T at 2012/11/15 03:47am
error message

I got some message in the html file:

Parse error: Illegal token in file '[inline]' on line 70 Parse error: Illegal token in file '[inline]' on line 27 Parse error: Illegal token in file '[inline]' on line 1

And website run slower than before, I guest because of these error.

#9111 report it
limitless at 2012/07/20 01:56pm
Re: minscript

since version 2.0, minScript does automatically pick up any CSS and Javascript files registered through clientScript (including assets)

#8405 report it
androok at 2012/05/31 05:42pm
minscript

in reply to:

Minscript
Just as clarification: minScript has always been able to also minify, cache and combine external assets which are controlled by other extension or yii itself.

Is there a way to automatically have this done with minscript like you can using escriptboost? escriptboost will auto minify any javascript that a yii/zii widget sneakily includes so that you don't have to manually register them with minscript.

I've asked this question in the minscript forum post a few weeks ago and received no response - until that capability exists - to basically automatically minify anything in your assets folder - this extension still has a place.

At the end of the day, I just want one extension to minify all my javascript, for any widgets included, etc., cat them into one file, and serve that file in the pos_X. Both extensions get me about halfway there - escript does automatic, but does not concat - minscript does concat but requires me to know all javascript that will be used by any widgets on the page and register the scripts with minscript.

#8065 report it
limitless at 2012/05/08 03:40am
MinScript

Just as clarification: minScript has always been able to also minify, cache and combine external assets which are controlled by other extension or yii itself.

#6779 report it
Antonio Ramirez at 2012/02/04 06:12pm
@fleuryc and @terrasoff

Will do, sorry do not have much time nowadays...

#6758 report it
fleuryc at 2012/02/03 06:08am
minify HTML

Hi!

Nice extension there!

Could you document the usage for CSS and HTML please?

Thx

#6647 report it
terrasoff at 2012/01/25 06:33am
minify css

could you explain how to minify css?

#6079 report it
Antonio Ramirez at 2011/12/10 11:58am
@ibo_s

There are solutions already here for that, check minscript for example... for the assets that you control is fine.

#6067 report it
ibo_s at 2011/12/09 02:19pm
Nice Extension ...

would be nice if we could include all scripts into one file after minifying. Having only one scriptfile for js and one file for css would reduce the loading time even more. Is there a solution for this too ?

Leave a comment

Please to leave your comment.

Create extension