Shopify使用什么来最小化JavaScript和CSS？

Question

我的测试站点有大量的加载时间，并且测试表明我可以通过最小化JS和CSS资产来降低性能。

Shopify使用什么来最小化JavaScript和CSS？ 谢谢

Answer 1

Shopify不能自动最小化您的Java脚本（您需要自己做），但是可以通过给它一个'scss'后缀，然后将其包含在其中来自动最小化您的CSS。您网站的后缀为.scss.css

因此，如果您的CSS文件当前命名为theme.css.liquid，并且包含在{{ 'theme.css' | asset_url | stylesheet_tag }}中，则为您的站点：

• 将CSS文件的名称更改为以.scss结尾（如果有问题的文件以.scss.liquid结尾，则更改为.css.liquid）-在这种情况下，该文件成为theme.scss.liquid

• 将对文件的引用更改为以.scss.css结尾-在这种情况下，包含将变为{{ 'theme.scss.css' | asset_url | stylesheet_tag }}（请注意，后缀.liquid不是包括在这里）

结果将是使用未缩小的源代码构建的缩小的CSS文件。

但是，正如约翰·贝尔（John Bell）在对您的主要帖子的评论中提到的那样，仅缩小可能无法解决潜在的问题。如果您查看速度测试的瀑布结果，请查找具有较长“等待”或“ TTFB”时间的文件-这些文件需要很长时间让Shopify编译，并指出您的Liquid代码是什么需要优化。此外，还要查找“下载”时间较长的文件，并查看这些文件是否可以压缩或仅推迟，以便仅在初始页面完成后加载。