Ele.me মূল ভূখণ্ড চীনের বৃহত্তম খাদ্য অর্ডার এবং বিতরণ কোম্পানি। এটি সারা চীনের 200টিরও বেশি শহরের 260 মিলিয়ন নিবন্ধিত ব্যবহারকারীদের পরিবেশন করে এবং 1.3 মিলিয়নেরও বেশি রেস্তোরাঁ তালিকা রয়েছে। এর 99% ব্যবহারকারীরা মোবাইলে খাবারের অর্ডার দিয়ে, Ele.me তার মোবাইল ওয়েব অভিজ্ঞতাকে উন্নত করার জন্য শুরু করেছে, এটিকে ফ্ল্যাকি সংযোগগুলিতে দ্রুত এবং আরও নির্ভরযোগ্য করে তুলছে, সমস্ত কিছু তাদের সামঞ্জস্য করার জন্য একটি বহু-পৃষ্ঠা অ্যাপের মূল প্রযুক্তিগত মডেলের উপর নির্ভর করে অপারেশনাল প্রয়োজন।
- সমস্ত প্রাক-ক্যাশ করা পৃষ্ঠাগুলিতে লোডিং সময় 11.6% কমেছে৷
- সমস্ত পৃষ্ঠা জুড়ে লোডিং সময় গড়ে 6.35% কমেছে।
- প্রথম লোডে 3G নেটওয়ার্কে টাইম-টু-সাংবাদিক-ইন্টারেক্টিভ 4.93 সেকেন্ডে নেমে এসেছে
আমরা ele.me PWA প্রকাশ করার পরে, আমাদের লোডিং সময় উল্লেখযোগ্যভাবে হ্রাস পেয়েছে, আমাদের মোবাইল ওয়েব অভিজ্ঞতাকে চীনের দ্রুততম খাদ্য সংরক্ষণের সাইটগুলির মধ্যে একটিতে রূপান্তরিত করেছে।
স্পেন্সার ইয়াং, Ele.me PWA এর প্রোডাক্ট ম্যানেজার
মাল্টি-পেজ অ্যাপ এবং একক পৃষ্ঠা অ্যাপের মধ্যে বেছে নেওয়া
একটি মাল্টি-পেজ অ্যাপে (MPA), প্রতিটি রুট যা একজন ব্যবহারকারী নেভিগেট করে সার্ভারে প্রয়োজনীয় স্ক্রিপ্ট এবং শৈলী সহ পৃষ্ঠার সম্পূর্ণ অনুরোধ ট্রিগার করে। এটি একটি একক-পৃষ্ঠা অ্যাপ (SPA) মডেলের বিপরীতে, যেখানে প্রতিটি রুট নেভিগেশন শুধুমাত্র সেই রুটের সাথে সম্পর্কিত বিষয়বস্তু এবং ডেটার জন্য একটি আনয়ন ট্রিগার করে এবং UI তারপর ক্লায়েন্ট অ্যাপে চলমান Javascript কোড দ্বারা নির্মিত হয়।
সাম্প্রতিক বছরগুলিতে Ele.me-এর বিস্ফোরক বৃদ্ধি কোম্পানির মধ্যে স্বতন্ত্র ব্যবসায়িক ইউনিটের বৃদ্ধির দিকে পরিচালিত করেছে, প্রত্যেকেই প্রধান https://ele.me ডোমেনের অধীনে তার মাইক্রো-সার্ভিস চালানোর দায়িত্বে রয়েছে। Ele.me টিম উপসংহারে পৌঁছেছে যে এই পৃথক পরিষেবাগুলির ডিকপলিং একটি মাল্টি-পেজ অ্যাপ (এমপিএ) মডেল দ্বারা সর্বোত্তমভাবে পরিবেশিত হয়, প্রতিটি দল তার নিজস্ব পরিষেবা চালায় এবং বজায় রাখে।
একজন এমপিএ-তে PRPL আবেদন করা
পিআরপিএল প্যাটার্ন ( প্রিলোড ক্রিটিক্যাল রিসোর্স, রেন্ডার প্রাথমিক রুট, প্রাক-ক্যাশে অবশিষ্ট রুট, অলস-লোড অবশিষ্ট রুট) ওয়েব ডেভেলপারদের একটি পিডব্লিউএ-এর কাঠামোকে নির্দেশিত করার জন্য রেলের একটি সেট প্রদান করে, যাতে ইন্টারঅ্যাক্টিভিটির দ্রুত সময়ের উপর বিশেষ জোর দেওয়া হয়। এবং নেটওয়ার্ক রাউন্ড ট্রিপ কমাতে সর্বোচ্চ ক্যাশিং। যদিও পিআরপিএল এসপিএগুলিতে ভালভাবে পরীক্ষা করা হয়েছে, তবে এটি কম স্পষ্ট ছিল যে কীভাবে একজন এমপিএতে এটি প্রয়োগ করবে। Ele.me PRPL মানসিকতা গ্রহণ করার সিদ্ধান্ত নিয়েছে যখন PWA হিসাবে তাদের MPA পুনর্নির্মাণের কথা ভাবছে। এটি করার জন্য, তারা নিশ্চিত করে যে কোনও ব্যবহারকারী যখন কোনও পৃষ্ঠায় নেভিগেট করেন, তখন তারা সেই পৃষ্ঠার জন্য প্রয়োজনীয় সংস্থানগুলিকে পূর্বে লোড করছেন <link rel="preload"> অন্তর্ভুক্ত করে, অথবা সেই স্ক্রিপ্টগুলিকে যথেষ্ট অগভীর স্তরে সার্ফেস করে যাতে ব্রাউজারের প্রিলোডার অতিরিক্ত ইঙ্গিতের প্রয়োজন ছাড়াই তার কাজ করতে পারে। ব্রাউজার দ্বারা সমর্থিত হলে তারা একটি পরিষেবা কর্মীকে ইনস্টল করার মাধ্যমে ধীরে ধীরে তাদের PWA উন্নত করে, যেটি তারা তারপরে অন্যান্য শীর্ষ-স্তরের নেভিগেশন রুটগুলিকে আনয়ন এবং প্রি-ক্যাশ করতে ব্যবহার করে যাতে ব্যবহারকারীরা ক্লিক করার সাথে সাথে দ্রুত লোডিং এবং রেন্ডারিং অভিজ্ঞতা পায়। PWA. একটি MPA-এর প্রতিটি পৃষ্ঠা তার নিজস্ব রুট, তাই প্রাথমিক রুটের রেন্ডারিং দ্রুত করা প্রতিটি রুটের জন্য সমালোচনামূলক রেন্ডারিং পাথ অপ্টিমাইজ করার জন্য সর্বোত্তম অনুশীলন বাস্তবায়নের সমতুল্য। এই পরিবর্তনগুলির সাথে, সমস্ত পৃষ্ঠা জুড়ে সামগ্রিক লোডিং সময় গড়ে 6.35% কমেছে৷
যত তাড়াতাড়ি সম্ভব রূপান্তর কঙ্কাল পর্দা পরিবেশন
Ele.me কঙ্কাল স্ক্রীনের ধারণাটি UX-এ প্রয়োগ করতে চেয়েছিল, যা নিশ্চিত করার একটি উপায় যে যখনই ব্যবহারকারী কোনও বোতাম বা লিঙ্কে ট্যাপ করে, পৃষ্ঠাটি ব্যবহারকারীকে সেই নতুন পৃষ্ঠায় স্থানান্তরিত করে এবং তারপরে লোড করার মাধ্যমে যত তাড়াতাড়ি সম্ভব প্রতিক্রিয়া দেখায়। যে পৃষ্ঠার বিষয়বস্তুতে বিষয়বস্তু উপলব্ধ হয়; এটি PWA এর অনুভূত কর্মক্ষমতা উন্নত করার মূল চাবিকাঠি। যাইহোক, যেহেতু একটি MPA-এর প্রতিটি পৃষ্ঠা তার নিজস্ব প্রাথমিক রুট, তাই প্রতিটি নেভিগেশনের জন্য প্রয়োজনীয় সমস্ত লোডিং, পার্সিং এবং মূল্যায়নের কাজ প্রতিবার করতে হবে।
এটিকে ঘিরে কাজ করার জন্য, Ele.me একটি প্রকৃত UI উপাদান হিসাবে কঙ্কাল স্ক্রীন তৈরি করেছে, এবং তারপরে Vue.js-এর সার্ভার সাইড রেন্ডারিং স্ট্যাক তৈরি করতে ব্যবহার করেছে এবং তারপর এইচটিএমএল টেমপ্লেটে ইনজেকশন দেওয়ার আগে স্ট্রিংগুলিতে Vue উপাদানগুলিকে প্রি-রেন্ডার করেছে৷ এটি তাদের কঙ্কালের পর্দাকে সরাসরি রেন্ডার করতে এবং পৃষ্ঠাগুলির মধ্যে নেভিগেট করার সময় আরও তরল রূপান্তর অর্জন করতে দেয়।
 |  |
পরিষেবা কর্মীর সাথে শেয়ার করা সম্পদ ক্যাশিং
PWA এর চারপাশে ব্যবহারকারী ব্রাউজ করার সময় বিভিন্ন রুট লোড করা হয় এবং নেটওয়ার্ক থেকে এই রুটগুলি বারবার লোড করা একটি অপচয় হবে। এটি মোকাবেলা করার জন্য, Ele.me সেই জটিল রুটগুলি বিশ্লেষণ করেছে যা ব্যবহারকারীরা সবচেয়ে বেশি যত্নশীল, এই গুরুত্বপূর্ণ রুটগুলির নির্ভরতা সংগ্রহ করার জন্য একটি ওয়েবপ্যাক প্লাগইন তৈরি করেছেন এবং তারপরে ব্যবহারকারীর ক্লায়েন্ট ব্রাউজারে কোনও পরিষেবা কর্মী ইনস্টল করার সময় এই রুটগুলিকে প্রিক্যাচ করেছেন৷ এই জটিল রুটগুলির মধ্যে জাভাস্ক্রিপ্ট, CSS এবং চিত্রগুলি অন্তর্ভুক্ত রয়েছে যা PWA-এর সাধারণ UI শেল গঠন করে।
যে রুটগুলি গুরুত্বপূর্ণ বলে বিবেচিত হয়, কিন্তু সমালোচনামূলক নয়, সেগুলি রানটাইমে পরিষেবা কর্মী দ্বারা ক্রমবর্ধমানভাবে ক্যাশে করা হয় কারণ ব্যবহারকারী PWA-এর মাধ্যমে নেভিগেট করতে থাকে। এটি Ele.me কে সমস্ত নেটওয়ার্ক অবস্থার অধীনে ক্যাশে থেকে সরাসরি ব্যবহারকারীদের কাছে PWA পরিবেশন করার অনুমতি দেয়। ফলাফল: সমস্ত প্রাক-ক্যাশ করা পৃষ্ঠাগুলিতে লোডিং সময় 11.6% কমেছে৷