آموزش افزایش سرعت اجرای وب اپلیکیشن های فلاتر

اگر یک برنامه نویس فلاتر هستید و با از نسخه وب اپلیکیشن پروژتون استفاده میکنید قطعا با کند بودن سرعت اجرا اولیه فلاتر روبرو شده اید.

این یک مشکل رایج در وب اپلیکیشن‌ها یا وب‌سایت‌هایی است که با فلاتر ساخته شده‌اند. اما چه طور سعی کنیم این مشکل را حل کنیم؟

در این سری از مقالات فلاتر به بررسی این مورد میپردازیم.

اهمیت سرعت اپلیکیشن

در دنیای امروز که همه چیز با سرعت برق و باد پیش می‌رود، صبر و حوصله کاربران به شدت کم شده است.

به همین دلیل، سرعت اجرای اپلیکیشن در برنامه نویسی موبایل به یکی از مهم‌ترین فاکتورها در جلب رضایت کاربران و موفقیت یک برنامه تبدیل شده است.

دلایل اهمیت سرعت:

• تجربه کاربری بهتر: کاربران به دنبال اپلیکیشن‌هایی هستند که سریع و روان اجرا شوند.
  اگر اپلیکیشن شما کند باشد، کاربران به سرعت از آن خسته شده و به سراغ برنامه‌های دیگر می‌روند.
  
• افزایش تعامل: کاربران تمایل دارند با اپلیکیشن‌هایی تعامل داشته باشند که سریع و پاسخگو باشند.
  کندی سرعت می‌تواند باعث عدم تمایل به استفاده از برنامه شود.
  
• افزایش رتبه در اپ‌استورها: اپلیکیشن‌هایی که سرعت اجرای بالایی دارند، رتبه بهتری در اپ‌استورها و مارکت‌های مختلف اپلیکیشن کسب می‌کنند.
  
• مزیت رقابتی: در دنیای پررقابت امروز، سرعت می‌تواند به عنوان یک مزیت رقابتی برای اپلیکیشن شما عمل کند.

سرعت اجرای اولیه اپلیکیشن فلاتر

اگر به سراغ فایل index.html که داخل پوشه lib قرار دارد بروید، متوجه خواهید شد که این فایل وظابف بسیار مهمی دارد. تگ‌های <script> کار اصلی را انجام می‌دهند.

این بخش <script src=”flutter.js” defer></script>، اسکریپت شامل کد راه‌اندازی فلاتر (flutter.js) است و روی حالت defer تنظیم شده است، به این معنی که بعد از تجزیه سند HTML اجرا می‌شود.

<script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>

این اسکریپت به رویداد بارگذاری Load گوش می‌دهد و اقدامات زیر را انجام می‌دهد:

• دانلود فایل main.dart.js که حاوی کد اصلی دارت برای برنامه است.
• راه‌اندازی موتور فلاتر با استفاده از کد دانلود شده و پیکربندی service worker.
• اجرای برنامه پس از اینکه موتور به طور کامل راه‌اندازی شد.

این فایل HTML به عنوان نقطه ورود برای وب اپلیکیشن فلاتر عمل می‌کند.

آموزش جامع انتشار اپلیکیشن اندروید و فلاتر در فروشگاه گوگل پلی Google play

ساختار اولیه را تعریف می‌کند، منابع لازم را بارگذاری می‌کند و موتور فلاتر را برای رندر کردن رابط کاربری و عملکرد برنامه در مرورگر وب راه‌اندازی می‌کند.

خب، خب، خب، این قطعا برای نمایش اولین صفحه برنامه کمی زمان می‌برد.

چگونگی کاهش زمان اجرا

همانطور که در بخش‌های بالا دیدیم، زمان اصلی مورد نیاز برای اجرا توسط این اسکریپت‌ها گرفته می‌شود.

آیا می‌توان زمان گرفته شده توسط اسکریپت‌های جداگانه را کاهش داد؟ خب، از نظر فنی خیر، زیرا هر اسکریپت به مدت زمانی مستقل از دیگر اسکریپت ها برای اجرا نیاز دارد.

با این حال، ما می‌توانیم کل زمانی را که توسط همه اسکریپت‌ها صرف می‌شود را کاهش دهیم! راز این است که اسکریپت‌ها را به صورت موازی اجرا کنیم.

یک ویژگی در تگ <script> وجود دارد به نام defer. با بررسی معنی آن، گفته می‌شود که اگر ویژگی defer تنظیم شود، مشخص می‌کند که اسکریپت به موازات تجزیه صفحه دانلود شده و پس از اتمام تجزیه صفحه اجرا می‌شود. و این همان چیزی است که ما می‌خواهیم! ما می‌خواهیم اسکریپت ما به موازات تجزیه صفحه اجرا/دانلود شود!

حالا به سادگی به index.html خود بروید و ویژگی defer را روی تگ اسکریپت به صورت زیر تنظیم کنید:

<script src="flutter.js" defer></script>

<script defer>
  window.addEventListener('load', function () {
...

در هر دو تگ <script> عبارت defer را ذکر کردیم. حالا هر دو اسکریپت در حالی که صفحه در حال تجزیه است کار خود را انجام می دهند و سپس بعد از اتمام تجزیه اجرا می شوند.

این کار باعث می شود وب اپلیکیشن فلاتر شما کمی سریعتر بارگذاری شود!

نکته مهم:

همه ما به طور گسترده از فایربیس استفاده کرده‌ایم. شاید از فایربیس به طور فعال استفاده نکنید، اما ممکن است از برخی از محصولات آنها استفاده کنید.

هر یک از محصولات آنها مانند Crashlytics، Analytics، Firestore و غیره نیاز به راه‌اندازی FirebaseApp دارند.

ما همیشه FirebaseApp را در تابع اصلی قبل از تابع runApp راه‌اندازی می‌کنیم و منتظر آن می‌مانیم (با کلمه کلیدی await)، درست است؟

آیا واقعاً نیاز دارید از فایربیس در همان صفحه اول استفاده کنید؟ احتمالا نه. شاید صفحه اول شما صفحه Splash باشد و جایی است که از فایربیس استفاده می کنید. موارد بسیار نادری وجود دارد که قبل از رندر کردن اولین صفحه برنامه خود به فایربیس نیاز داشته باشید.

بنابراین، می توانید اضافه کردن await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); را رد کنید و قبل از استفاده آن را راه‌اندازی کنید.

توجه: اگر هر بار قبل از استفاده آن را راه‌اندازی کنید، خطایی ایجاد می کند. بنابراین یک متغیر داشته باشید که به شما کمک کند بفهمید FirebaseApp راه‌اندازی شده است یا خیر.

با استفاده از نکات بالا قطعا اپلیکیشن فلاتر شما با سرعت بیشتری اجرا خواهد شد