EXT: Javascript and Css Optimizer¶

Alert: For Typo3 4.4 use only the 1.1.1 version of this extension

Introduction¶

What does it do?¶

• It provide Hooks to optimize the Javascript and CSS in the page render prozess.
• It compress Javascript and CSS Files.
• It bundle the JavaScript and CSS Files.

Users manual¶

The Extension doesn't do the compress and bundle logic automatically.
You have to activate the compression and bundling in typoscript or directly with the pageRender.

Administration¶

In the Extension Manager you could configure the CSS Compression. The extension use the CSSTidy library http://csstidy.sourceforge.net/.

You could also disable the CSS or Javascript bundle functionality separately.

Caching¶

The new files would be cached in the typo3temp Folder. They wouldn't renew if a css and js file is changed.
To clear the cache use the Clear Cache Button in Typo3 Backend.

Configuration¶

Typoscript¶

CSS compression¶

Import the css like this:

page {
includeCSS {
 screenStyle = ..../base.css
 screenStyle {
   media = screen
   import = 0
   compress=1
 }

JS compression¶

To activate the JS compression:

page{
 includeJS {
 file1 = ....common.js
 file1.compress=1
...

Bundling¶

To bundle the files:

config.concatenateJsAndCss = 1

Hint¶

Use the includeJSlibs to create a separate bundle and use the browser caching for script which are needed on every page.
You could use the forceOnTop setting, to control the order of the content in the bundle.

page.includeJSlibs{
  jquery = ...jquery-1.3.2.min.js
  jquery.forceOnTop = 1
  common={$const.path.scripts}common.js
  common{
    compress=1
  }
  ...
}

Add Files with php¶

To add JS and CSS files with php from your extension don't use the $GLOBALS['TSFE']->additionalHeaderData functionality.
You have to add the files with the pagerender

$pagerender = $GLOBALS['TSFE']->getPageRenderer();
$pagerender->addCssFile($file, $rel = 'stylesheet', $media = 'screen', $title = '', $compress = TRUE, $forceOnTop = FALSE, $allWrap = '');
$pagerender->addJsFile($file, $type = 'text/javascript', $compress = TRUE, $forceOnTop = FALSE, $allWrap = '');
$pagerender->addCssInlineBlock($name, $block, $compressed = FALSE, $forceOnTop = FALSE);
$pagerender->addJsInlineCode($name, $block, $compress = TRUE, $forceOnTop = FALSE);

Known problems¶

The compression and bundle logic is triggered by the pagerender of typo3. That means that it works only if you render the page.
If you have a cache page and insert a uncached extension which add a js and css file to the pagerender, it would have no effect.
But this is a pagerender effect and not of this extension.

To-Do list¶

1. Support the import rule inside the css files.