Ele.me بزرگترین شرکت سفارش و تحویل غذا در سرزمین اصلی چین است. این سرویس به 260 میلیون کاربر ثبت نام شده از بیش از 200 شهر در سراسر چین خدمات می دهد و بیش از 1.3 میلیون لیست رستوران دارد. Ele.me با توجه به اینکه 99٪ از کاربرانش غذا را از طریق تلفن همراه سفارش می دهند، تلاش کرد تا تجربه وب تلفن همراه خود را بهبود بخشد، آن را سریعتر و قابل اطمینان تر در اتصالات پوسته پوسته کند، همه اینها در حالی که به مدل فنی اصلی یک برنامه چند صفحه ای برای تطبیق با آنها متکی است. نیازهای عملیاتی
- زمان بارگذاری در تمام صفحات از پیش ذخیره شده 11.6٪ کاهش یافت
- زمان بارگذاری به طور متوسط 6.35٪ در تمام صفحات کاهش یافته است.
- زمان به طور مداوم تعاملی به 4.93 ثانیه در شبکه 3G در اولین بار کاهش یافت
پس از انتشار ele.me PWA، زمان بارگذاری ما به میزان قابل توجهی کاهش یافت و تجربه وب تلفن همراه ما را به یکی از سریع‌ترین سایت‌های رزرو غذا در چین تبدیل کرد.
اسپنسر یانگ، مدیر محصول Ele.me PWA
انتخاب بین اپلیکیشن چند صفحه ای و اپلیکیشن تک صفحه ای
در یک برنامه چند صفحه‌ای (MPA)، هر مسیری که کاربر برای رسیدن به آن پیمایش می‌کند، درخواست کامل صفحه را همراه با اسکریپت‌ها و سبک‌های مورد نیاز به سرور ارسال می‌کند. این برخلاف مدل برنامه تک صفحه‌ای (SPA) است، که در آن هر مسیر ناوبری فقط برای محتوا و داده‌های مربوط به آن مسیر واکشی می‌کند و سپس UI توسط کد جاوا اسکریپت در حال اجرا در برنامه مشتری ساخته می‌شود.
رشد انفجاری Ele.me در سال‌های اخیر منجر به رشد واحدهای تجاری متمایز در داخل شرکت شده است که هر کدام وظیفه اجرای خدمات خرد خود را تحت دامنه اصلی https://ele.me بر عهده دارند. تیم Ele.me به این نتیجه رسید که جداسازی این سرویس‌های فردی به بهترین وجه توسط یک مدل اپلیکیشن چند صفحه‌ای (MPA) انجام می‌شود که هر تیم سرویس خود را اجرا و حفظ می‌کند.
اعمال PRPL برای MPA
الگوی PRPL (منابع بحرانی پیش بارگذاری ، مسیر اولیه رندر ، مسیرهای باقیمانده از پیش حافظه پنهان ، مسیرهای باقیمانده با بار تنبل ) مجموعه‌ای از ریل‌ها را برای توسعه‌دهندگان وب فراهم می‌کند تا ساختار یک PWA را هدایت کنند، با تأکید ویژه بر زمان سریع برای تعامل و به حداکثر رساندن حافظه پنهان برای کاهش رفت و برگشت شبکه. در حالی که PRPL به خوبی در SPA ها آزمایش شده است، کمتر مشخص بود که چگونه می توان آن را در یک MPA به کار برد. Ele.me تصمیم گرفت تا زمانی که به بازسازی MPA خود به عنوان PWA فکر می کند، طرز فکر PRPL را در پیش بگیرد. برای انجام این کار، آنها اطمینان حاصل می کنند که وقتی کاربر به صفحه ای هدایت می شود، منابع مهم را برای آن صفحه از قبل بارگذاری می کند، با گنجاندن <link rel="preload"> در صورت لزوم، یا قرار دادن آن اسکریپت ها در سطحی به اندازه کافی کم عمق به طوری که پیش بارگذاری مرورگر می تواند کار خود را بدون نیاز به نکات اضافی انجام دهد. آنها همچنین به تدریج PWA خود را با نصب سرویس‌کار هر زمان که توسط مرورگر پشتیبانی می‌شود، بهبود می‌بخشند، که سپس از آن برای واکشی و پیش کش کردن سایر مسیرهای ناوبری سطح بالا استفاده می‌کنند تا کاربر با کلیک کردن روی اطراف، تجربه بارگیری و رندر سریع‌تری داشته باشد. PWA هر صفحه در یک MPA مسیر خودش را دارد، بنابراین افزایش سرعت رندر مسیر اولیه معادل اجرای بهترین روش‌ها برای بهینه‌سازی مسیر رندر بحرانی برای هر مسیر است. با این تغییرات، زمان کلی بارگذاری به طور متوسط 6.35 درصد در تمام صفحات کاهش یافت.
در اسرع وقت به صفحه های اسکلت انتقالی خدمت می کنیم
Ele.me می خواست ایده صفحه نمایش های اسکلت را در UX اعمال کند، که راهی برای اطمینان از اینکه هر زمان که کاربر روی دکمه یا پیوندی ضربه می زند، صفحه در اسرع وقت با انتقال کاربر به آن صفحه جدید و سپس بارگذاری واکنش نشان می دهد. در محتوای آن صفحه با در دسترس قرار گرفتن محتوا؛ این همچنین کلید بهبود عملکرد درک شده PWA است. با این حال، از آنجایی که هر صفحه در یک MPA مسیر اولیه خودش است، هر ناوبری نیاز به انجام مجدد همه کارهای بارگیری، تجزیه و ارزیابی لازم در هر بار دارد.
برای حل این مشکل، Ele.me صفحه اسکلت را به عنوان یک مؤلفه UI واقعی ساخت، و سپس از پشته رندر سمت سرور Vue.js برای ساخت و سپس پیش رندر مولفه های Vue به رشته ها قبل از تزریق آنها به قالب های HTML استفاده کرد. این به آنها اجازه می‌دهد تا صفحه اسکلت را مستقیماً رندر کنند و هنگام پیمایش بین صفحات، انتقال روان‌تری به دست آورند.
 |  |
ذخیره منابع مشترک با سرویس دهنده
هنگامی که کاربر در اطراف PWA جستجو می کند، مسیرهای مختلف بارگذاری می شوند و بارها و بارها بارگیری این مسیرها از شبکه یک هدر خواهد بود. برای مقابله با این موضوع، Ele.me مسیرهای حیاتی را که کاربران بیشتر به آن اهمیت می‌دهند، تجزیه و تحلیل کرد، یک پلاگین پک وب برای جمع‌آوری وابستگی‌های این مسیرهای حیاتی ایجاد کرد، و سپس زمانی که یک سرویس‌کار را روی مرورگر مشتری کاربر نصب می‌کنند، این مسیرها را پیش کش کرد. این مسیرهای حیاتی شامل جاوا اسکریپت، CSS و تصاویری است که پوسته UI معمولی PWA را تشکیل می دهند.
مسیرهایی که مهم تلقی می شوند، اما حیاتی نیستند، به طور تدریجی توسط سرویس دهنده در زمان اجرا ذخیره می شوند، زیرا کاربر به پیمایش از طریق PWA ادامه می دهد. این به Ele.me اجازه می‌دهد تا در تمام شرایط شبکه، PWA را مستقیماً از حافظه پنهان به کاربران ارائه دهد. نتیجه: زمان بارگذاری 11.6٪ در تمام صفحات از پیش ذخیره شده کاهش یافت.