前言:
工作期间,有在负责 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
的值,然而图片资源还是会进行加载,在桌面端带宽比拟大的状况下,能够不必太在意,然而在挪动端带宽比拟小,浪费资源去加载不须要的比拟大的图片资源等是很没有必要的。当然,做为一个新人,通过本人摸索进去的方法只有这些,若各位有更好的方法,能够多交换交换。最初,有写得不好的中央,心愿揭示揭示,多多包涵!