README

此扩展允许您方便地将内联 CSS 和 JS、延迟加载的 CSS 和 JS 以及 Web 字体添加到项目中。
此扩展的目标是通过如何加载这些资源来提高页面整体速度。

功能

扩展完全通过 typoscript 配置
允许在 <head> 和 </body> 之前包含内联 CSS 和 JS
允许包含 CSS 和 JS 文件，但具有延迟加载
允许通过 webfontloader 包含 Google 字体和自定义字体
所有包含的资产都可以被压缩和合并

使用方法

安装

使用 Composer 安装

建议通过 composer 安装此扩展。
要安装它，只需执行 composer require sethorax/typo3-assetsloader

此扩展也可以通过 TYPO3 扩展存储库 (TER) 传统方式安装。

TypoScript 设置

此扩展的每个方面都可以通过 typoscript 设置进行配置。

示例 typoscript 设置

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.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css
            }
        }
    }
}

所有设置都配置在 plugin.tx_assetsloader

TypoScript 设置

concatenateCSS

如果启用，所有 CSS 文件都将合并。合并仅在 includeCSSDeferred 和 includeJSDeferred 下受支持。
可以通过在文件设置中设置 excludeFromConcatenation = 1 来排除单个文件。

concatenateJS

与 concatenateCSS 相同，但针对 JS。

minifyCSS

如果启用，所有 CSS 代码都将压缩。压缩受所有 CSS 和 JS 相关设置的支撑。

minifyJS

与 minifyCSS 相同，但针对 JS。

includeCSSInline

该设置中的所有条目都将作为 style 标签包含在 <head> 中。
它还可以包含文件内容作为内联 CSS。要这样做，为该条目设置 file = 1。
支持压缩。

includeCSSInlineFooter

与 includeCSSInline 相同，但包含 style 标签在 </body> 之前。

includeJSInline

该设置中的所有条目都将作为 script 标签包含在 <head> 中。它还可以包含文件内容作为内联 JS。要这样做，为该条目设置 file = 1。
支持压缩。

includeJSInlineFooter

与 includeJSInline 相同，但包含 script 标签在 </body> 之前。

includeCSSDeferred

该设置中的所有条目将通过一个小型内联加载脚本进行延迟加载。
默认加载脚本可以在 settings.deferredCssLoadingScript 中被覆盖。
仅接受文件。
支持压缩和合并。
可以通过在文件设置中设置 excludeFromConcatenation = 1 来排除单个文件。

includeJSDeferred

该设置中的所有条目将作为具有 async 和 defer 属性的 script 标签包含。
仅接受文件。
支持压缩和合并。
可以通过在文件设置中设置 excludeFromConcatenation = 1 来排除单个文件。

fontloader.googleFonts

该设置中的所有 Google 字体族都将通过 webfontloader 加载。
字体族的内容必须是 Google 字体的字体族字符串！

fontloader.customFonts

允许您通过 webfontloader 加载自定义字体族。

fontloader.customFonts.families

在此处添加字体族名称。

fontloader.customFonts.urls

字体族的 URL。

覆盖默认设置

所有默认设置都在 settings 中设置

settings.deferredCssLoadingScript

此设置包含用于延迟加载CSS文件的加载脚本。
此脚本必须包含两个将在以后替换的标记。

settings.WFLLoadingScript

此设置包含用于加载webfontloader的加载脚本。

sethorax / typo3-assetloader

维护者

详细信息

README

功能

使用方法

安装

TypoScript 设置

示例 typoscript 设置

TypoScript 设置

覆盖默认设置