Shopify性能优化之动态渲染模块

前言：

工作期间，有在负责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的值，但是图片资源还是会进行加载，在桌面端带宽比较大的情况下，可以不用太在意，但是在移动端带宽比较小，浪费资源去加载不需要的比较大的图片资源等是很没有必要的。当然，做为一个新人，通过自己摸索出来的办法只有这些，若各位有更好的办法，可以多交流交流。最后，有写得不好的地方，希望提醒提醒，多多包涵！