nystudio107 / minify
一个简单的插件,允许您在Craft CMS模板中内联压缩HTML、CSS和JS块。
Requires
- composer/installers: ~1.0
- mrclay/minify: ^3.0.2
This package is auto-updated.
Last update: 2024-08-29 03:47:25 UTC
README
已弃用
此Craft CMS 2.x插件不再受支持,但它完全功能正常,您可以按需继续使用它。许可证还允许您将其分支并修改以满足对旧版支持的需求。
此插件的Craft CMS 3.x版本可在以下位置找到:craft-minify,并且也可以通过Craft CP中的Craft插件商店安装。
Craft CMS的Minify插件
一个简单的插件,允许您在Craft CMS模板中内联压缩HTML、CSS和JS块
安装
- 下载并解压缩文件,将
minify
目录放置到您的craft/plugins
目录中 - -或者直接通过
git clone https://github.com/khalwat/minify.git
将其克隆到您的craft/plugins
文件夹。然后您可以使用git pull
来更新它 - -或者使用Composer通过
composer require nystudio107/minify
安装 - 在Craft控制面板的“设置”>“插件”下安装插件
- 插件文件夹应该命名为
minify
,以便Craft可以识别。GitHub最近开始在zip文件下载的文件夹名称中添加-master
(分支名称)。
配置Minify
没有需要配置的内容
在模板中使用Minify插件
Minify在您的模板中添加了几个块标签,用于内联压缩HTML、CSS和JS。Minify不会压缩外部的CSS或JS文件。使用grunt
或gulp
任务运行器设置工作流程,将它们最小化作为构建过程的一部分。
您可以根据需要嵌套任意数量的各种{% minify %}
标签。
为什么压缩内联HTML/CSS/JS代码?
Twig提供了{% spaceless %}
标签,但它并不旨在用作正确压缩HTML/CSS/JS代码的方法。
您已经通过mod_deflate
模块或通过在Nginx
中启用压缩来通过gzip
正确压缩输出,以实现生产中的最佳交付。您已经使用任务运行器如grunt
或gulp
或CodeKit来最小化CSS/JS等静态资源。那么,为什么还要压缩HTML/CSS/JS内联代码呢?
首先,您希望保留HTML/CSS/JS注释和代码的优雅分层结构,以及在开发中有足够的可读空白,但希望所有这些都从发送到您的前端用户的HTML/CSS/JS中删除。
其次,并非所有CSS/JS都可以或应该放在静态资产文件中。有时您需要出于效率原因的内联JavaScript,或者如果您正在将JSON-LD
用于Google结构化数据/SEO目的的内联在HTML文件中。您可能还希望能够在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压缩所负面影响。
缓存如缓存
使用{% minify %}
标签的一个好方法是将其包裹在{% cache %}
标签中
{% cache %}
{% minify %}
(HTML/Twig code here)
{% endminify %}
{% endcache %}
与{% cache %}
标签一样,您不能在扩展其他模板的模板中顶级{% block %}
标签外使用{% minify %}
标签。了解更多关于缓存标签的信息
在{% cache %}
标签内压缩HTML的一个不错的好处是,存储在数据库中的缓存文本本身也是压缩的。
如果您已经实施了一个缓存系统以减少服务器响应时间,向其中添加{% minify %}
标签是一个自然的选择。
压缩craft.config设置
Minify提供了两个craft.config
(在您的config/general.php
中设置)来允许您控制其行为
disableTemplateMinifying
如果设置为true
,则Minify将不会压缩任何内容
disableDevmodeMinifying
如果设置为true
,则当devMode
启用时,Minify将不会压缩任何内容
为什么我的压缩HTML/CSS仍然有换行符?
Minify使用Minify PHP库。以下是他们的官方解释
为什么CSS和HTML压缩器会添加这么多换行符?
TL;DR: 忽略它们。它们不会增加输出大小,如果您绝对希望所有内容都在一行上,您将不得不使用另一个工具。
据说一些源代码管理和旧版浏览器不喜欢非常长的行。较短的行也更容易进行差异比较。
由于这两个Minify类都是基于正则表达式的,因此很难/容易出错地先计算字符数,然后尝试恢复上下文来添加换行符。相反,这两个类尽可能地将1个空格替换为1个换行符(\n),添加换行但不增加字节。
如果您能想到另一种安全且高效的方法在不增加字节的情况下限制这两个工具中的行数,请提交补丁,但这不是任何人应该担心的事情。
由 nystudio107 提供