包简介

Pagespeed friendly asset loader for TYPO3 CMS

README 文档

README

This extension enables you to conveniently add inline CSS and JS, deferred CSS and JS and Webfonts to your project.
The goal of this extension is to improve the overall pagespeed by how those assets are loaded.

Features

Extension is entirely configured via typoscript
Enables including inline CSS and JS in both <head> and before </body>
Enables including CSS and JS files but with deferred loading
Enables including google fonts and custom fonts via the webfontloader
All included assets can be minified and concatenated

Usage

Installation

Installation using Composer

It is recommended to install this extension via composer.
To install it just do composer require sethorax/typo3-assetsloader

This extension can also be installed traditionally via the TYPO3 Extension Repository (TER).

TypoScript Setup

Every aspect of this extension is configurable via typoscript setup.

Example typoscript setup:

plugin.tx_assetsloader {
    concatenateCSS = 1
    concatenateJS = 1
    minifyCSS = 1
    minifyJS = 1

    includeCSSInline {
        critical = body {background-color: black; min-height: 100vh;}          
    }
    includeCSSInlineFooter {
        styles = EXT:my_page_extension/Resources/Public/styles/styles.css
        styles.file = 1
    }
    includeJSInline {
        app = fileadmin/app.js
        app.file = 1
    }
    includeJSInlineFooter {
        script = console.log('Hello World!');
    }
    includeCSSDeferred {
        deferred = fileadmin/style.css
        deferred2 = fileadmin/style2.css
        deferred3 = fileadmin/style2.css
        deferred3.excludeFromConcatenation = 1
    }
    includeJSDeferred {
        app = fileadmin/app.js  
    }

    fontloader {
        googleFonts {
            roboto = Roboto:400,500,500i
            opensans = Open Sans:400
        }
        customFonts {
            families {
                fa = FontAwesome  
            }
            urls {
                fa = https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
            }
        }
    }
}

All settings are configured in plugin.tx_assetsloader

Typoscript Settings

concatenateCSS

If enabled all CSS files will be concatenated. Concatenation is only supported by includeCSSDeferred and includeJSDeferred.
Single files can be excluded from concatenation by setting excludeFromConcatenation = 1 in the files settings.

concatenateJS

Same as concatenateCSS but for JS.

minifyCSS

If enabled all CSS code will be minified. Minification is supported by all CSS and JS related settings.

minifyJS

Same as minifyCSS but for JS.

includeCSSInline

All entries within that setting will be included as a style tag in the <head>.
It can also include file contents as inline CSS. To do so, set file = 1 for that entry.
Supports minification.

includeCSSInlineFooter

Same as includeCSSInline but includes the style tag before </body>.

includeJSInline

All entries within that setting will be included as a script tag in the <head>. It can also include file contents as inline JS. To do so, set file = 1 fot that entry.
Supports minification.

includeJSInlineFooter

Same as includeJSInline but includes the script tag before </body>.

includeCSSDeferred

All entries within that setting will be loaded deferred via a small inline loading script.
The default loading script can be overwritten in settings.deferredCssLoadingScript.
Accepts only files.
Supports minification and concatenation.
Single files can be excluded from concatenation by setting excludeFromConcatenation = 1 in the files settings.

includeJSDeferred

All entries within that setting will be included as a script tag with the async and defer attribute.
Accepts only files.
Supports minification and concatenation.
Single files can be excluded from concatenation by setting excludeFromConcatenation = 1 in the files settings.

fontloader.googleFonts

All google font families within that setting will be loaded with the webfontloader.
The content of a font family must be the font family string from Google Fonts!

fontloader.customFonts

Allows you to load custom font families with the webfontloader.

fontloader.customFonts.families

Add the font family names here.

fontloader.customFonts.urls

The urls to the font family.

Overwriting default settings

All default settings are set in settings

settings.deferredCssLoadingScript

This setting contains the loading script to defer load CSS files.
This script must contain two markers wich will be replaced later:

Marker	Description
###CSSFILE####	This marker will be replaced by the full path of the css file.
###SCRIPTNAME###	This marker will be replaced by a generated hash to create a unique loading function.

settings.WFLLoadingScript

This setting contains the loading script to load the webfontloader.

sethorax/typo3-assetloader 适用场景与选型建议

sethorax/typo3-assetloader 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 3.26k 次下载、GitHub Stars 达 1，最近一次更新时间为 2017 年 04 月 30 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「assets」「css」「cms」「JS」「PageSpeed」「frontend」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 sethorax/typo3-assetloader 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 sethorax/typo3-assetloader 我们能提供哪些服务？

定制开发 / 二次开发

基于 sethorax/typo3-assetloader 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发