DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
Javascript and CSS Optimizer¶
| Author: | Kasper Skårhøj |
|---|---|
| Created: | 2002-11-01T00:32:00 |
| Changed: | 2010-01-06T14:18:28.290000000 |
| Classification: | js_css_optimizer |
| Keywords: | forDevelopers, forIntermediates |
| Author: | Axel Jung |
| Email: | axel.jung@aoemedia.de |
| Info 4: | |
| Language: | en |
Javascript and CSS Optimizer - js_css_optimizer
Javascript and CSS Optimizer¶
Extension Key: js_css_optimizer
Language: en
Keywords: forDevelopers, forIntermediates
The content of this document is related to TYPO3
- a GNU/GPL CMS/Framework available from www.typo3.org
Table of Contents¶
Javascript and CSS Optimizer 1
`Introduction 3 <#1.1.Introduction|outline>`_
`Users manual 4 <#1.2.Users%20manual|outline>`_
`Administration 5 <#1.3.Administration|outline>`_
`Configuration 6 <#1.4.Configuration|outline>`_
`Known problems 8 <#1.5.Known%20problems|outline>`_
`To-Do list 9 <#1.6.To-Do%20list|outline>`_
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
…
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.