麦进斗(Magento)VUE前端性能优化速度提升

    麦进斗(Magento)VUE前端性能优化速度提升

 

 

麦进斗(Magento)使用EAV模型，查一个产品join大约十几个表。以10万产品为单位，对应的custom option 大约需要40万行，甚至更多。

麦进斗(Magento)的初始化非常雍容，大量的xml初始化，即使目前做了大量的集群缓存但是这么大的量也得耗费大量资源去做解析。

麦进斗(Magento)的index manager 为了提高速度，把eav表重新搞成flat 表，还有重写等其他，设计很好。但是运行时间一长，索引每段时间都会出问题，新产品上架频繁，经常出现sku搜索不到，url rewrite部分失效问题，需要重新刷新索引。产品少还好说，如果产品多，数据就很大。

太灵活的xml，造成出了问题，排查问题比较费劲，有时候开发一个功能，造成其他的地方失效。

目前麦进斗(Magento)的所谓优化，基本都是各个层缓存，xml加载的雍容初始化，和product 的eav模型的大量join。

目前想要从根本上提升麦进斗(Magento)运行性能和效率可考虑直接VUE重写前端。

目前国内70%的电商访问流量来自于移动手机端，所以我们为zoro量身定制的性能优化方案的技术演进思路为：

VUE重构手机端（可同步处理微信公众号商城及APP开发满足70%的购买用户） –>以VUE重构PC前端（降低项目整体风险，在手机端稳定运行前保留现有系统前端正常运营）- >整体迁移至社区版

在重构手机端过程中同步进行UI设计实现

 

什么是Vue前端重构？

VUE是一个构建数据驱动的web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

购物经历会有怎样的变化呢？

Zoro.cn采用VUE重构前端后可实现如下改变：

    前端页面快速响应功能

快速前端响应。同步PWA移动技术后可实现原生app本地预加载，实现快速购物。

Vue同步使用PWA方法，确保店面可以在2秒内呈现产品目录。

解决高并发功能

麦进斗(Magento)的原有框架因为架构设计原因运行起来非常慢。在大量SKU的情况下流量一提升，等待时间和响应时间将大大延长，这样一来，极大程度上降低了客户的满意程度，用户体验不佳。

为了防止页面高并发的情况，Vue前端重构工作，使得它能够更加轻松自在地应对高并发问题的出现。可处理大量的流量峰值，满足zoro.cn后续推广运营流量提升需求。

离线浏览功能

VUE同步采用PWA可实现原生APP离线流量本地商品体验，相较于目前采用的Magento缓存来讲PWA可进一步提升客户体验及减少服务器资源消耗。

多平台支持功能

VUE是目前最火的前端架构之一，广泛兼容各类显示终端及浏览器，后续可非常方便的进行维护、开发。

基于Vue重构后的Magento商城特性

IndexedDB数据库–正式因为浏览器内数据库的存在，离线浏览功能成为了可能。从商店浏览产品到下订单都可以在没有互联网的情况下完成，然后存放在浏览器中的队列中，在用户重新上线后就会自动处理订单。

基于js的前端– 利用Vue.js作前端库，可以更加轻松设计和自定义店面。

平台无关–麦进斗(Magento)2前端VUE重构后，后期前端调整不需要专业麦进斗(Magento)2前端开发人员，普通VUE前端开发也可进行前端修改开发工作。

原生应用程序般的体验- 包括将PWA可以添加至主屏幕以及可实现消息推送功能。

高速本地缓存-  IndexedDB与Service Workers协同工作，将平均服务器响应时间减少到不到1秒，而客户端平均渲染时间小于2秒。

 

总结

Vue重构麦进斗(Magento)前端可同步打通后续移动端工作，在性能效率提升后支撑后续迁移至社区版技术线路设计。