我正在尝试优化 shopify 网站，GoogleSpeed Insights 建议我缩小 css 和 js 文件。
推荐的文件都是由液体模板生成器生成的，所以我不能使用流行的缩小工具。
如果有人有这个问题的经验，请告诉我。
谢谢。
【问题讨论】：
标签： javascript css minify liquid
如果您尝试缩小此类文件，您将看到由于 Liquid 模板代码而导致的错误。这是一个技巧，可以帮助您缩小包含 Liquid 模板代码的 JavaScript 文件。但这涉及很少的体力劳动。
用一些随机的唯一字符串替换所有 Liquid 模板代码。记住所有的替换。您可以使用文件差异应用程序查找.js.liquid 文件和生成的.js 文件的差异，以便轻松找到需要替换的位置。现在，您可以使用任何 JavaScript 缩小工具来缩小这个修改后的文件而不会出现任何错误。缩小结束后，您可以将随机的唯一字符串替换为相应的替换字符串。
我正在优化一个主题以获得良好的 PageSpeed Insights 分数。这个技巧帮助我缩小、合并和压缩许多 .js.liquid 文件。
【讨论】：
我没有用 pagespeed 测试过这个，但它看起来像 html 级别的。
在 Business Catalyst 中，我可以使用液体执行以下操作
{% assign allthedata = {{myData|json}} -%}
{{allthedata | remove: ' '}}
我不知道这是否会影响页面速度，但尝试一下很简单
这会删除我在 myData.json 中动态生成的所有空格。
【讨论】：
我已经使用这个应用程序大约 7 个月了，我非常喜欢它。它可以转换和压缩您的文件。
我使用 SASS 作为我的 CSS 预处理器，这个应用程序可以帮助我保持代码整洁，这是我将 10 个文件合并为一个文件并对其进行压缩的方法：
然后，你得到了 2 个不同的 css 文件，一个是压缩的，一个不是。您可以在创建网站时使用 main.css 进行调试，然后，当您完成并且您的网站运行良好时，您可以使用 main-dist.css 并压缩您的样式。
哦，顺便说一句，我不知道如何使用 Grunt 或 Gulp，我喜欢这个应用程序，因为它很简单
P.S 我正在使用试用版（它是免费的），并计划在我为客户完成一些工作后立即购买此应用。
【讨论】：