Shopify Dawn主题如何强制本地加载JS文件而非走CDN？

问题原因 #

Shopify的asset_url过滤器默认会把资源映射到官方CDN地址，开发环境下如果资源更新频率高，CDN节点缓存未同步就会出现旧资源加载的情况，部分资源走本地是因为本地开发代理的缓存优先级高于CDN缓存。

解决方案 #

方案1：手动拼接本地资源路径 + 动态版本号

直接放弃asset_url过滤器，手动写本地路径，同时拼接Shopify自带的asset版本参数，避免本地缓存，还可以通过环境判断区分开发/生产配置：

{% if request.host contains 'myshopify.com' or request.design_mode %}
  <!-- 开发/预览环境走本地路径 -->
  <script src="/assets/swiper.js?v={{ 'swiper.js' | asset_url | split: 'v=' | last }}" defer="defer"></script>
  <script src="/assets/swiper-handle.js?v={{ 'swiper-handle.js' | asset_url | split: 'v=' | last }}" defer="defer"></script>
{% else %}
  <!-- 生产环境走正常CDN路径保证加载速度 -->
  <script src="{{ 'swiper.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'swiper-handle.js' | asset_url }}" defer="defer"></script>
{% endif %}

这里的版本号直接从asset_url的输出结果里自动截取，不需要手动修改，每次资源更新后版本号会自动同步。

方案2：本地开发禁用CDN代理

如果你是用Shopify CLI做本地开发，启动时加禁用CDN的参数即可让所有资源走本地加载：

shopify theme dev --no-cdn

开启后不会触发Shopify CDN缓存，所有资源都会实时加载本地修改后的版本。

方案3：强制刷新CDN资源识别

如果还是存在旧缓存加载问题，可以直接给文件加临时后缀，比如把swiper-handle.js重命名为swiper-handle-v1.js，同步修改引入的文件名，Shopify会识别为全新资源，不会加载旧的CDN缓存内容。

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