nystudio107 / craft3-minify
Requires
- craftcms/cms: ^3.0.0-RC1
- mrclay/minify: ^3.0.0
This package is not auto-updated.
Last update: 2019-02-20 19:08:51 UTC
README
Craft CMS 3.x的Minify插件
一个简单的插件,允许您在Craft CMS模板中对HTML、CSS和JS的块进行内联压缩
要求
此插件需要Craft CMS 3.0.0-RC1或更高版本。
安装
- 在项目目录中使用Composer安装:`composer require nystudio107/craft-minify`
- 在Craft控制面板的设置>插件下安装插件
您也可以通过Craft AdminCP中的插件商店安装Minify。
配置Minify
无需配置
在您的模板中使用Minify插件
Minify在您的模板中添加了多个块标签,用于内联压缩HTML、CSS和JS。Minify不会压缩外部的CSS或JS文件。使用grunt
或gulp
任务运行器来设置一个工作流程,在构建过程中最小化这些文件。
您可以根据需要嵌套任意数量的各种{% minify %}
标签。
为什么压缩内联HTML/CSS/JS代码?
Twig提供了{% spaceless %}
标签,但不建议将其用作正确压缩HTML/CSS/JS代码的方式。
您已经通过mod_deflate
在Apache中或通过启用Nginx
的压缩来正确地gzip
输出,以实现生产中的最佳交付。您已经使用任务运行器如grunt
或gulp
或CodeKit来最小化CSS/JS等静态资源。内联压缩HTML/CSS/JS有什么意义呢?
首先,您希望保留HTML/CSS/JS注释和代码的优雅层次结构,以及大量的可读空白空间以供开发使用,但同时又希望所有这些从发送到前端的服务器端HTML/CSS/JS中清除。
其次,并非所有的CSS/JS都可以或应该放在静态资产文件中。有时出于效率原因,您可能需要内联JavaScript,或者如果您在HTML文件中使用内联JSON-LD
以实现Google结构化数据/SEO目的,或者您可能希望能够在CSS/JS中使用Craft模板引擎。
最后,如果您压缩了任何用{% cache %}
标签包裹的代码,这意味着它将在数据库中以压缩形式存储,从而减少数据库大小和(略微)事务开销。
压缩所有内容
您可以将任何任意HTML/Twig代码包裹在以下块标签中,以对其进行压缩
{% minify %} (HTML/Twig code here) {% endminify %}
...并且生成的HTML输出将删除注释、空格等。
单独使用 {% minify %}
(参数见下文)将压缩HTML,以及任何内联CSS(在<style>
标签对中)和任何内联JavaScript(在<script>
标签对中)。
压缩HTML
您可以将任何任意HTML/Twig代码包裹在以下块标签中,以对其进行压缩
{% minify html %} (HTML/Twig code here) {% endminify %}
...并且生成的HTML输出将删除注释、空格等。
在压缩过程中将忽略<script>
和<style>
标签对。如果您想同时压缩内联CSS/JS,应特别将它们包裹在{% minify css %}
和{% minify js %}
标签块中;详见下文。
压缩CSS
您可以将任何任意的<style>
CSS代码包裹在以下块标签中以便压缩它
{% minify css %} <style> (Inline CSS styles here) </style> {% endminify %}
...生成的CSS输出将移除注释、空格等。
压缩JS
您可以将任何任意的<script>
JS代码包裹在以下块标签中以便压缩它
{% minify js %} <script> (Inline JS code here) </script> {% endminify %}
...生成的JS输出将移除注释、空格等。
压缩所有内容
如果您想在客户端压缩整个HTML,可以简单地将整个_layout.twig
模板(其他模板继承的那个)包裹起来
{%- minify -%} (Entire base HTML/Twig template here) {%- endminify -%}
但是,请理解可能带来的性能影响。对于大型HTML/CSS/JS块,压缩并不便宜,如果这样操作,每个HTTP请求都会额外消耗周期来最小化整个模板。
这对于不是特别大的HTML/CSS/JS模板来说效果不错,但在包裹整个_layout.twig
模板之前和之后对网站进行性能分析,以确保您不会在HTTP请求中引入额外的延迟。
在大多数网站上,启动PHP和Craft所花费的开销是TTFB(首次字节时间)的主要部分,这不会因压缩整个HTML而受到不利影响。
{%- -%}
语法只是Twig的空白控制。
像缓存一样缓存
使用{%- minify -%}
标签的一个好方法是将其包裹在{% cache %}
标签中
{%- cache -%} {%- minify -%} (HTML/Twig code here) {%- endminify -%} {%- endcache -%}
与{% cache %}
标签一样,您不能在模板中扩展其他模板的顶级{% block %}
标签外部使用{%- minify -%}
标签。了解更多关于缓存标签的信息
在{% cache %}
标签内压缩HTML的一个好处是,存储在数据库中的缓存文本本身也被压缩。
如果您已经实现了缓存系统以减少服务器响应时间,添加{%- minify -%}
标签是自然而然的。
{%- -%}
语法只是Twig的空白控制。
压缩craft.config设置
Minify提供了一个config.php
文件,允许您控制其行为
disableTemplateMinifying
如果设置为true
,则Minify将不会压缩任何内容
disableDevmodeMinifying
如果设置为true
,则如果devMode
启用,Minify将不会压缩任何内容
不要直接修改此文件,而是复制它,将其重命名为minify.php
,并将其复制到您的craft/config
文件夹中。
为什么我的压缩后的HTML/CSS仍然有换行符?
Minify使用的是Minify PHP库。以下是他们的官方解释:
为什么CSS和HTML压缩器添加了这么多换行符?
TL;DR:忽略它们。它们不会增加输出大小,如果你绝对希望所有内容都在一行,你将不得不使用另一个工具。
据说一些源代码控制工具和旧版浏览器不喜欢非常长的行。带有较短行的压缩文件也更容易进行差异比较。
由于Minify的两个类都是基于正则表达式的,因此很难/容易出错地计算字符,然后尝试重新建立上下文以添加换行符。相反,这两个类尽可能地将1个空格替换为1个换行符(\n
),添加换行但不增加字节数。
如果你能想到另一种安全且高效的方法在不增加字节数的情况下限制这两个工具中的行数,请提交补丁,但这不是任何人都应该担心的事情。
由nystudio107提供。