共计 1245 个字符，预计需要花费 4 分钟才能阅读完成。
前言：
工作期间，有在负责 shopify 独立站的我的项目。而后，三月份提出要进行速度优化，晋升页面的加载速度，其实自身对于 shopify 这种挪动端以及 pc 端都共用一套模板的，pc 端和挪动端只是通过媒体查问去管制显示以及暗藏。pc 端可能加载的问题并不大，而对于挪动端，受限于手机的网络带宽，加载慢的状况就特地显著。
解决方案：
思路一：
查找 shopify 是否有相干的变量或者字段可能判断目前处于挪动端还是 pc 端，这样就能间接在模板中通过判断变量的值去动静渲染模块，遵循着这个思路，去查找了 liquid 的官网文档 https://www.shopify.com/partners/shopify-cheat-sheet, 通过查找，发现theme.role 这个变量。
原本很开心，认真一看，原来前面跟着个deprecated，what？？？，被弃用了？霎时就好受了，原本认为能够间接通过判断该值为 main 还是 mobile 去动静渲染。既然这个不行，那就换个思路。
思路二：
在 liquid 文件里写 js 进行判断，而后动静渲染。那么，应该要如何写 js 去进行动静渲染呢，上面先贴一下代码，
// 判断是 pc 还是挪动端动静渲染节点
let content;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// 判断是挪动端时，引入挪动端模板
{% capture mobileTemplate %}{% include "mobileTemplate" %}{% endcapture %}
content = {{mobileTemplate | json}};
} else {
// 判断是桌面端时，引入桌面端模板
{% capture desktopTemplate %}{% include "desktopTemplate" %}{% endcapture %}
content = {{desktopTemplate | json}};
}
$('#template_box').html(content);首先，先写两个 liquid 文件，一个挪动端的 liquid 模板文件，另一个天然是桌面端的 liquid 模板文件，通过 js 判断目前处于挪动端还是桌面端，而后别离定义一个变量，变量里通过 include 别离引入各自的模板，而后将其输入赋值给 content 变量，最初插入指定节点中。
论断：
其实为什么要进行动静渲染呢，次要还是 shopify 的模板是通过媒体查问进行管制显示暗藏，如果该模块有很多的图片，须要在桌面端显示，挪动端暗藏，即便通过管制 display 的值，然而图片资源还是会进行加载，在桌面端带宽比拟大的状况下，能够不必太在意，然而在挪动端带宽比拟小，浪费资源去加载不须要的比拟大的图片资源等是很没有必要的。当然，做为一个新人，通过本人摸索进去的方法只有这些，若各位有更好的方法，能够多交换交换。最初，有写得不好的中央，心愿揭示揭示，多多包涵！
