sfFrontendOptimizerPlugin - 0.0.2

Combines multiple JavaScript and CSS files into one JavaScript and one CSS file at runtime

You are currently browsing
the website for symfony 1

Visit the Symfony2 website

« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
Show source

sfFrontendOptimizerPlugin

Combines multiple JavaScript and CSS files into one JavaScript and one CSS file at runtime, in order to minimize the number of HTTP requests required to render a given page. Also delete spaces in html output.

Without sfFrontendOptimizerPlugin, a typical page requires many HTTP requests to get JavaScript and CSS files:

<head>
  ...
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/sf/jquery-ui.js"></script>
  <script type="text/javascript" src="/sf/jquery.slider.js"></script>     
  <link rel="stylesheet" type="text/css" media="screen" href="/css/main.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="/css/layout.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="/css/typo.css" />    
</head>

With sfFrontendOptimizerPlugin, every page needs far fewer HTTP requests for all JavaScript code and style rules:

<head>
  ...
  <script type="text/javascript" src="/build/all-fa85b641ddfa951e57ba96bf990d76c4-1.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="/build/all-21cf49fc13ba26430c5779c431e68995-1.css">   
</head>

The JavaScript and CSS files will be build at runtime and save into static files.

Installation

  1. Download the plugin and copy to plugins folder.

  2. Activate the plugin in the config/ProjectConfiguration.class.php

    class ProjectConfiguration extends sfProjectConfiguration
{
    public function setup()
    {
      $this->enablePlugins(array(
          '...'
          'sfFrontendOptimizerPlugin',            
          '...'
      ));
    }
}

  3. Since symfony 1.3, the layout uses the regular include_javascripts() and include_stylesheets() helpers to output calls to the JavaScript and CSS files.

    Replace them with the include_m_optimized_javascripts() and the include_m_optimized_stylesheets() helpers.

    // in apps/frontend/templates/layout.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>
<link rel="shortcut icon" href="/favicon.ico" />
<?php include_m_optimized_stylesheets() ?>
<?php include_m_optimized_javascripts() ?>
</head>
<body>
<?php echo $sf_flash->getRaw('notice') ?>
</body>

  4. Clear the cache to enable the autoloading to find the new classes

Basic configuration

Basic configuration of frontend optimization is done in the frontend_optimizer_plugin section of a standard app.yml configuration file.

prod:
frontend_optimizer_plugin:
    enabled: true                           # status of the plugin
    use_spaceless_filter: true              # use sfFrontendSacelessFilter
    warm_cache: []
 
 
all:
frontend_optimizer_plugin:
    enabled: false                          # status of the plugin
    use_spaceless_filter: false             # use sfFrontendSacelessFilter
    configuration:                          # optimization service configuration
      version: 2                            # assets version
      javascript:                         
        enabled: true                     
        destination: /build/all-:tag-:v.js  # destination path for optimized .js files
        driver: yui                         # optimization driver name (yui, jsmin)
        driver_params: []                   # optimization driver params
      stylesheet:                         
        enabled: true                     
        destination: /build/all-:tag-:v.css  # destination path for optimized .css files    
        driver: yui                          # optimization driver name (yui, cssmin)
        driver_params: []                    # optimization driver params
    warm_cache:                              # config uses sfFrontendWarmCacheTask
      auth:
        username: ~                          # base auth username
        password: ~                          # base auth password
      links:                                 # links to warm up cache
        - http://dev.example.ru/
        - http://dev.example.ru/page1/
        - http://dev.example.ru/page2/
        - http://dev.example.ru/page3/
        - http://dev.example.ru/page4/

Caching

When the page is load plugin detect all uses js and css files and make hash from file names. If file with hash already generated and saved in folder, plugin add html code.

Because combine and minify files take time you can use warm up cache task to generate optimized files in dev enviroment and copy them in production.

php symfony wcc

Saceless Filter

Also plugin can delete spaces from html output.

# in apps/frontend/config/filters.yml
rendering: ~
 
spaceless:
class: sfFrontendSacelessFilter
 
#...

Before

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<p>...</p>
</body>

After

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head></head><body><p>...</p></body>

Example

You can see how it work in here