Shopify Dawn主题中避免区块CSS重复加载的方法

以下是几个实用的解决办法，兼顾代码维护性和页面性能：

1. 区块内添加加载判断（最直接） #

在你的自定义区块代码里，通过Liquid变量标记CSS是否已加载，仅在首次渲染区块时加载CSS文件：

{% unless lookbook_css_loaded %}
  {{ 'lookbook.css' | asset_url | stylesheet_tag }}
  {% assign lookbook_css_loaded = true %}
{% endunless %}

<!-- 区块的其他HTML代码 -->

原理：Liquid在页面渲染时会共享变量，第一个区块会加载CSS并设置lookbook_css_loaded为true，后续区块检测到该变量存在就跳过加载逻辑。

2. 在主题Layout中全局判断加载（更可控） #

如果希望统一管理CSS加载时机，可修改theme.liquid的<head>区域，遍历页面所有区块/section，仅在存在目标自定义区块时加载一次CSS：

{% comment %} 在theme.liquid的<head>内添加 {% endcomment %}
{% for section in sections %}
  {% if section.type == '你的自定义区块类型ID' %}
    {{ 'lookbook.css' | asset_url | stylesheet_tag }}
    {% break %} {% comment %} 找到第一个匹配区块就停止遍历，避免重复加载 {% endcomment %}
  {% endif %}
{% endfor %}

如果你的自定义元素是**Block（子区块）**而非Section，可调整为遍历每个Section下的Block：

{% for section in sections %}
  {% for block in section.blocks %}
    {% if block.type == '你的自定义Block类型ID' %}
      {{ 'lookbook.css' | asset_url | stylesheet_tag }}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if lookbook_css_loaded %}
    {% break %}
  {% endif %}
{% endfor %}

优点：CSS只会在包含目标区块的页面加载，且仅加载一次，不会影响无该区块的页面性能。

3. 合并到主题主CSS文件（最简单但需权衡） #

如果你的lookbook.css代码量不大，可直接将内容复制到Dawn主题的component.css或base.css中（推荐component.css，符合Dawn的CSS组织规范）。

• 优点：彻底避免重复加载问题，无需额外判断逻辑
• 缺点：该CSS会全局加载，即使页面没有使用自定义区块也会加载，适合CSS体积较小的场景

额外提示 #

• 不管用哪种方案，都可以通过浏览器开发者工具的Network面板（筛选CSS）验证是否仅加载一次lookbook.css
• 若lookbook.css可压缩，建议手动压缩后上传，进一步优化加载速度

内容的提问来源于stack exchange，提问作者Ankit Maurya