如何缩小液体模板生成器生成的javascript文件

我正在尝试优化shopify网站，GoogleSpeed Insights建议我缩小css和js文件

推荐的文件都是由liquid template generator生成的，所以我不能使用流行的minify工具

如果有人有这方面的经验，请告诉我

谢谢。

我已经使用这个应用程序7个月了，我绝对喜欢它。它可以转换和压缩您的文件

我使用SASS作为我的CSS预处理器，这个应用程序帮助我保持代码干净，下面是我如何将10个文件压缩成一个文件的方法：

创建10.sass文件

再创建一个.sass文件，将所有这些文件导入其中，我称之为main.sass

使用prepos将所有文件导入到一个文件中，然后将其转换为main.css

因此，为了进行调试，我离开main.css并创建另一个名为main-dist.css的css文件

使用预印本将main.css压缩到main-dist.css

在这里，你得到了两个不同的css文件，一个是压缩的，另一个不是。您可以在创建网站时使用main.css进行调试，稍后，当您完成并且您的网站工作正常时，您可以使用main-dist.css并压缩样式

哦，顺便说一句，我不知道如何使用咕噜或咕噜，我喜欢这个应用程序，因为它很简单

---

另外，我正在使用试用版（它是免费的，），并计划在我为客户做一些工作后立即购买该应用。

我还没有用pagespeed测试过它，但它看起来可以在html级别工作

在Business Catalyst中，我可以使用液体执行以下操作

{% assign allthedata = {{myData|json}} -%}

{{allthedata | remove: ' '}} 

我不知道这是否会影响页面速度，但这很简单，可以尝试一下

---

这将删除动态生成的myData.json中的所有空格。

如果尝试缩小此类文件，您将看到由于液体模板代码而导致的错误。这里有一个技巧可以帮助您缩小包含液体模板代码的JavaScript文件。但这几乎不涉及体力劳动

用一些随机唯一字符串替换所有液体模板代码。记住所有的替代品。您可以使用file diff应用程序查找

.js.liquid

文件与生成的

.js

文件之间的差异，以便轻松找到需要替换的位置。现在，您可以使用任何JavaScript缩小工具缩小修改后的文件，而不会出现任何错误。缩小结束后，可以用相应的替换项替换随机唯一字符串

---

我正在优化一个主题以获得良好的PageSpeed Insights分数。这个技巧帮助我缩小、合并和压缩了许多

.js.liquid

文件。

你能解释一下为什么不能使用gulp或其他taskrunner进行缩小吗？即使文件是由某个生成器生成的，您也可以查看输出目录中的更改并缩小生成的文件。最可能的原因是liquid的大括号+百分号分隔符（{%…%}），这会导致缩小器抛出语法错误。您知道.liquid是什么吗？谢谢@FoNko。如果你觉得答案有用，请把它投上去。