استفاده از Lighthouse Bot برای تنظیم بودجه عملکرد

Milica Mihajlija

شما برای رسیدن به سرعت بالا سخت تلاش کرده‌اید، حالا با خودکارسازی تست عملکرد با Lighthouse Bot مطمئن شوید که سرعت خود را حفظ می‌کنید.

Lighthouse برنامه شما را در 5 دسته ارزیابی می‌کند و یکی از آنها عملکرد است. در حالی که می‌توانید سعی کنید هر بار که کد خود را ویرایش می‌کنید، تغییرات عملکرد را با DevTools یا Lighthouse CLI زیر نظر داشته باشید، لازم نیست این کار را انجام دهید. ابزارها می‌توانند کارهای خسته‌کننده را برای شما انجام دهند. Travis CI یک سرویس عالی است که هر بار که کد جدیدی اضافه می‌کنید، به طور خودکار تست‌هایی را برای برنامه شما در فضای ابری اجرا می‌کند.

Lighthouse Bot با Travis CI ادغام می‌شود و ویژگی بودجه‌بندی عملکرد آن تضمین می‌کند که شما به‌طور تصادفی و بدون اطلاع قبلی، عملکرد را کاهش ندهید. می‌توانید مخزن خود را طوری پیکربندی کنید که اگر امتیاز Lighthouse از آستانه‌ای که تعیین کرده‌اید پایین‌تر بیاید (مثلاً کمتر از ۹۶/۱۰۰)، اجازه ادغام درخواست‌های pull را ندهد.

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

۱. راه‌اندازی

این برنامه ساده به شما کمک می‌کند تا سه عدد را مرتب کنید.

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

۲. استقرار در فایربیس

برای شروع، به یک حساب کاربری Firebase نیاز دارید. پس از انجام این کار، با کلیک روی «افزودن پروژه» یک پروژه جدید در کنسول Firebase ایجاد کنید :

استقرار در فایربیس

برای استقرار برنامه به Firebase CLI نیاز دارید. حتی اگر از قبل آن را نصب کرده‌اید، بهتر است مرتباً CLI را با استفاده از این دستور به آخرین نسخه به‌روزرسانی کنید:

npm install -g firebase-tools

برای تأیید Firebase CLI، دستور زیر را اجرا کنید:

firebase login

حالا پروژه را مقداردهی اولیه کنید:

firebase init

کنسول در طول راه‌اندازی از شما یک سری سوال می‌پرسد:

• وقتی از شما خواسته شد ویژگی‌ها را انتخاب کنید، «میزبانی» را انتخاب کنید.
• برای پروژه پیش‌فرض Firebase، پروژه‌ای را که در کنسول Firebase ایجاد کرده‌اید، انتخاب کنید.
• عبارت «public» را به عنوان دایرکتوری عمومی خود تایپ کنید.
• برای پیکربندی به عنوان یک برنامه تک صفحه‌ای، "N" (خیر) را تایپ کنید.

این فرآیند یک فایل پیکربندی firebase.json در ریشه دایرکتوری پروژه شما ایجاد می‌کند.

تبریک می‌گویم، شما آماده‌ی استقرار هستید! دستور زیر را اجرا کنید:

firebase deploy

در کسری از ثانیه، شما یک برنامه زنده خواهید داشت.

۳. راه‌اندازی تراویس

شما باید یک حساب کاربری در Travis ثبت کنید و سپس ادغام برنامه‌های GitHub را در بخش تنظیمات پروفایل خود فعال کنید.

وقتی حساب کاربری دارید

به تنظیمات زیر پروفایل خود بروید، دکمه همگام‌سازی حساب را بزنید و مطمئن شوید که مخزن پروژه شما در Travis فهرست شده است.

برای شروع ادغام مداوم، به دو چیز نیاز دارید:

1. برای داشتن یک فایل .travis.yml در دایرکتوری ریشه
2. برای شروع یک ساخت با انجام یک git push معمولی قدیمی

مخزن lighthouse-bot-starter از قبل یک فایل YAML با پسوند .travis.yml دارد:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

فایل YAML به Travis می‌گوید که تمام وابستگی‌ها را نصب کند و برنامه خود را بسازد. حالا نوبت شماست که برنامه نمونه را به مخزن GitHub خود ارسال کنید . اگر قبلاً این کار را نکرده‌اید، دستور زیر را اجرا کنید:

git push origin main

برای مشاهده داشبورد Travis پروژه خود، روی مخزن خود در قسمت تنظیمات در Travis کلیک کنید. اگر همه چیز خوب پیش برود، خواهید دید که رنگ ساخت شما ظرف چند دقیقه از زرد به سبز تغییر می‌کند. 🎉

۴. خودکارسازی استقرار فایربیس با تراویس

در مرحله ۲، شما وارد حساب Firebase خود شدید و برنامه را از خط فرمان با firebase deploy مستقر کردید. برای اینکه Travis بتواند برنامه شما را در Firebase مستقر کند، باید آن را مجاز کنید. چگونه این کار را انجام می‌دهید؟ با یک توکن Firebase. 🗝️🔥

مجوزدهی فایربیس

برای تولید توکن، این دستور را اجرا کنید:

firebase login:ci

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

در داشبورد Travis پروژه خود، به گزینه‌های بیشتر > تنظیمات > متغیرهای محیطی بروید.

توکن را در فیلد مقدار قرار دهید، متغیر FIREBASE_TOKEN را نامگذاری کنید و آن را اضافه کنید.

استقرار را به تنظیمات Travis خود اضافه کنید

برای اینکه به Travis بگویید بعد از هر بار ساخت موفقیت‌آمیز، برنامه را مستقر کند، به خطوط زیر نیاز دارید. آن‌ها را به انتهای فایل .travis.yml اضافه کنید. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

این تغییر را به گیت‌هاب ارسال کنید و منتظر اولین استقرار خودکار خود باشید. اگر به لاگ Travis خود نگاهی بیندازید، باید به زودی عبارت ✔️ استقرار کامل شد را ببینید!

حالا هر زمان که در برنامه خود تغییراتی ایجاد کنید، آنها به طور خودکار در Firebase اعمال می‌شوند.

۵. راه‌اندازی ربات لایت‌هاوس

ربات Friendly Lighthouse شما را در جریان امتیازات Lighthouse اپلیکیشنتان قرار می‌دهد. فقط به یک دعوتنامه برای عضویت در مخزن شما نیاز دارد.

در گیت‌هاب، به تنظیمات پروژه خود بروید و «lighthousebot» را به عنوان همکار اضافه کنید (تنظیمات>همکاران):

تأیید این درخواست‌ها یک فرآیند دستی است، بنابراین همیشه فوراً اتفاق نمی‌افتند. قبل از شروع آزمایش، مطمئن شوید که lighthousebot وضعیت همکاری خود را تأیید کرده است. در عین حال، باید کلید دیگری را به متغیرهای محیطی پروژه خود در Travis اضافه کنید. ایمیل خود را اینجا بگذارید و یک کلید Lighthouse Bot در صندوق ورودی خود دریافت خواهید کرد. 📬

در Travis، این کلید را به عنوان یک متغیر محیطی اضافه کنید و نام آن را LIGHTHOUSE_API_KEY بگذارید:

ربات Lighthouse را به پروژه خود اضافه کنید

سپس، با اجرای دستور زیر، Lighthouse Bot را به پروژه خود اضافه کنید:

npm i --save-dev https://github.com/ebidel/lighthousebot

و این بیت را به package.json اضافه کنید:

"scripts": {
  "lh": "lighthousebot"
}

ربات Lighthouse را به پیکربندی Travis خود اضافه کنید

برای ترفند آخر، عملکرد برنامه را بعد از هر درخواست pull آزمایش کنید!

در .travis.yml ‎ یک مرحله دیگر در after_success اضافه کنید:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

این ابزار، ممیزی Lighthouse را روی URL داده شده اجرا می‌کند، بنابراین https://staging.example.com با URL برنامه خود (که your-app-123.firebaseapp.com است) جایگزین کنید.

استانداردهای خود را بالا ببرید و تنظیمات را طوری تنظیم کنید که هیچ تغییری در برنامه که امتیاز عملکرد را به زیر ۹۵ می‌رساند، نپذیرید:

- npm run lh -- --perf=95 https://staging.example.com

برای شروع آزمایش ربات Lighthouse روی Travis، یک درخواست pull ایجاد کنید.

ربات Lighthouse فقط درخواست‌های pull را آزمایش می‌کند، بنابراین اگر اکنون به شاخه اصلی ارسال کنید، در گزارش Travis خود با عبارت «این اسکریپت فقط می‌تواند روی درخواست‌های Travis PR اجرا شود» مواجه خواهید شد.

برای شروع تست ربات Lighthouse:

1. پرداخت شعبه جدید
2. آن را به گیت‌هاب ارسال کنید
3. درخواست pull ایجاد کنید

محکم به اون صفحه درخواست pull بچسب و منتظر باش تا Lighthouse Bot شروع به خوندن کنه! 🎤

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

گزینه‌های بیشتر فانوس دریایی

یادتان هست که لایت‌هاوس چطور ۵ دسته مختلف را آزمایش می‌کرد؟ می‌توانید برای هر کدام از این دسته‌ها با پرچم‌های ربات لایت‌هاوس امتیاز اعمال کنید:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

مثال:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

اگر امتیاز عملکرد به زیر ۹۳ یا امتیاز سئو به زیر ۱۰۰ برسد، این امر باعث رد شدن PR خواهد شد.

همچنین می‌توانید با استفاده از گزینه --no-comment نظرات Lighthouse Bot را دریافت نکنید.