Liquid模版和VUE模版优劣分析

新模版架构，采用liquid模版语法，服务端渲染，更快的性能

为什么要开发新架构模版？

fecify已经开发了vue的模版，已经开发了7套模版，为什么要开发新架构模版？因为vue模版存在一下问题：

1.首屏页面加载速度问题

• 首屏页面，指的是顾客第一次访问网站，访问的第一个页面，叫首屏页面
• vue模版是在浏览器客户端渲染，渲染之前需要将很多js文件下载到本地，然后才能渲染，而网络传输文件都需要时间，进而造成首屏页面加载时间过长
• fecify vue做了很多的优化工作，预加载js和css文件，但即时做了大量的优化工作，vue的模版渲染还是没有liquid模版快
• 首屏页面的加载速度，直接影响网页的跳出率，加载速度越快，跳出率越低。
• fecify liquid模版加入了整页缓存，缓存后速度更快（cloudflare本身也支持页面缓存）

2.页面加载偏移问题

• 页面加载偏移”一般指 页面在加载过程中，元素的位置、大小、布局发生变化，导致用户正在浏览或点击的内容突然被“挤走”。 这种现象在前端性能指标里叫 CLS（Cumulative Layout Shift，累计布局偏移）。
• 常见原因有：图片、广告、iframe 没有设置固定宽高，加载后把页面顶开；懒加载组件没有预留空间，后续内容插入导致抖动；CSS、JS 异步加载不当，导致布局计算被迫重新执行。
• 由于vue是js渲染，各个组件异步执行，进而无法控制渲染顺序，导致页面加载过程中出现大量的页面偏移，进而影响网站评分
• google网站测评网站：https://pagespeed.web.dev/ ，对vue类型的网站天然评分低
• 新模版架构，对图片上传加入了宽高比数据，图片懒加载模式，先通过尺寸将页面撑起来，图片记载后无缝替换，进而解决页面加载过程中的偏移问题

3.模版二次开发问题

• vue模版，是使用vue开发后编辑出来的html js css文件包，不支持模版二次开发。
• 前台商城的模版，用户对模版的要求是不可量化的，是千变万化的，因此不支持二次开发，势必这部分用户会选择wp，magento等开源商城来满足自己的需求
• 作为服务商，自己的客户定制模版UI是很常见的，也是利润增长点，如果不支持模版开发，势必无法满足模版定制的需要
• 模版的卡片固定，无法自己开发新的模版装修卡片
• 用户可能做一些小平台，需要再页面里面加一些js打点
• 总之，模版必须支持二次开发，才能扩展更多的业务面

4.模版功能

• 目前的vue模版，作为fecify的第一代模版，功能还是不够强大，目前的saas进化了很多，fecify的新模版以shopify模版作为参考，尽最大化的实现了同样的功能
• 采用shopify liquid模版语法，如果您开发过shopify模版，那么开发fecify模版基本零上手，降低学习成本
• 卡片支持分组，预览，检查模式支持子卡片选中等，可以进行更为方便的模版装修
• 页面支持多页面布局，譬如：商品详情页，支持多个布局，可以执行某个商品使用某个布局，增加更强的灵活性

总之，无论在功能上，还是性能上，还是seo层面，还是营销上面，开发新架构的模版来满足用户的需求，势在必行，我们花了10个月的时间来完成模版的全部重构、 当然，原来的vue模版也同样支持。

哪些模版是vue模版，哪些模版是liquid新架构模版？

1.截止2025年12月09日，目前只有B2C的Mirox模版是liquid模版，其他的都是vue模版

2.liquid模版，是另起一套逻辑开发的新架构，在新架构基础上开发的模版，支持liquid模版语法，支持模版二次开发等多种功能，因此命名为：liquid新架构模版

3.原来的vue模版，代码不变，还是可以使用的，两者属于独立的2套逻辑，前端代码层面完全独立

怎么理解mirox模版里面的装修市场

1.对于mirox模版，可以进行模版装修，根据自己的需要，设置装修参数，字体，配色方案等，每个人装修出来的效果都是不一样的

2.客户自己装修店铺，可能需要花费很多时间，如果根据不同的商品风格，提前装修出来多种不同风格的模版装修，不就节省效率了？

因此，我们提前装修了十几套样式，您可以加载任何一套装修样式到您的mirox模版，相当于提前帮您装修了模版，您一键加载过来

3.对于vue模版是没有装修市场的，只有liuqid的模版才会有，也就是目前mirox模版