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

Question

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

推荐文件全部由液体模板生成器生成，因此我无法使用流行的缩小工具。

如果有人有此问题的经验，请告诉我。

谢谢。

Answer 1

我没有用pagespeed对它进行过测试，但它看起来像html级别。

在Business Catalyst中，我可以使用液体

执行以下操作

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

{{allthedata | remove: ' '}} 

我不知道这是否会影响pagespeed，但它很容易尝试

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

Answer 2

如果您尝试缩小此类文件，则会因为Liquid模板代码而看到错误。这是一个技巧，可以帮助您缩小包含液体模板代码的JavaScript文件。但这涉及很少的体力劳动。

用一些随机唯一字符串替换所有Liquid模板代码。记住所有替换品。您可以使用文件差异应用程序查找.js.liquid文件与生成的.js文件的差异，以便您可以轻松找到需要替换的位置。现在，您可以使用任何JavaScript缩小工具缩小此修改后的文件，而不会出现任何错误。缩小结束后，您可以将随机唯一字符串替换为相应的替换字符。

我正在优化主题以获得良好的PageSpeed Insights分数。这个技巧帮助我缩小，组合和压缩了许多.js.liquid个文件。

Answer 3

https://prepros.io/

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

我使用SASS作为我的CSS预处理器，这个应用程序帮助我保持代码清洁，这就是我如何将10个文件合并为一个文件并压缩它：

1. 创建10个.sass文件
2. 再创建一个.sass文件，将所有这些文件导入一个文件，我称之为main.sass
3. 使用prepros将所有文件导入一个文件，然后将其转换为main.css
4. 因此，为了进行调试，我将保留main.css并创建另一个名为main-dist.css的
的css文件
5. 使用prepros将main.css压缩为main-dist.css。

在这里，你有两个不同的css文件，一个压缩，一个没有。您可以在创建网站时使用main.css，以便进行调试，之后，当您完成并且您的网站完美运行时，您可以使用main-dist.css并压缩您的样式。

哦，顺便说一下，我不知道如何与Grunt或Gulp合作，我喜欢这个应用程序因为它简单

P.S我正在使用试用版（它是免费的）并计划在我为客户做一些工作后立即购买此应用程序。