گنجاندن بودجه عملکرد در فرایند توسعه سایت

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

اولین بودجه کارایی و سرعت سایت Performance budgets

بعد از اینکه که بودجه عملکرد را تعریف کردید، زمان آن رسیده است که فرآیند توسعه را برای نظارت بر دستیابی به اهداف بودجه تهیه شده تنظیم کنید. ابزارهایی وجود دارند که به شما امکان می‌دهند آستانه‌هایی را برای معیارهای انتخابی تعریف کنید که در صورت تجاوز از بودجه به شما هشدار دهند. در این مقاله قصد داریم به شما بیاموزیم که چگونه یکی را انتخاب کنیم که به بهترین وجه با نیازها و تنظیمات فعلی مطابقت داشته باشد. 🕵️‍♀️

آنچه در این مقاله می‌خوانیم

بودجه عملکرد در توسعه وب با Lighthouse

Lighthouse یک ابزار بررسی و ممیزی است که سایت‌ها را در چند زمینه کلیدی آزمایش می‌کند – سرعت ، دسترسی، بهترین شیوه‌ها و سرعت سایت شما به عنوان یک برنامه وب پیشرفته (progressive web application).

Lighthouse به روش های مختلفی قابل استفاده است اما برای اینکه از آن برای تنظیم بودجه عملکرد سایت استفاده کنید و انحراف از مقادیر مشخص شده را به شما گزارش دهد باید از نسخه خط فرمان آن (command line version) استفاده کنید

ابزار Lighthouse (v5+) command line version از تنظیم بودجه عملکرد بر اساس موارد زیر پشتیبانی می‌کند:

اندازه منبع
تعداد منابع

می‌توانید برای هر یک از انواع منابع زیر بودجه تعیین کنید:

document
font
image
media
other
script
stylesheet
third-party
total

بودجه‌ها در یک فایل JSON تنظیم می‌شوند و پس از تعریف آن‌ها، ستون جدید «Over Budget» به شما می‌گوید که آیا از هر محدودیتی فراتر می‌روید یا خیر.

گنجاندن بودجه عملکرد در فرایند توسعه سایت - بخش "بودجه ها" در گزارش Lighthouse — بخش “بودجه ها” در گزارش Lighthouse

تنظیمات هشدار بودجه عملکرد در فرایند توسعه با Webpack

Webpack یک ابزار ساخت قدرتمند برای بهینه‌سازی نحوه تحویل کد شما به کاربران است. همچنین از تنظیم بودجه عملکرد بر اساس اندازه فایل‌ها و دارایی‌ها پشتیبانی می‌کند.

برای استفاده از این ابزار محدوده های بودجه عملکرد را در webpack.config.js فعال کنید تا زمانی که اندازه بسته شما بیش از حد مجاز افزایش می‌یابد، اخطارها یا خطاهای خط فرمان را دریافت کنید. این یک روش عالی برای حفظ اندازه و حجم دارایی ها در طول توسعه وب سایت است.

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

تنظیمات هشدار بودجه عملکرد در Webpack — حجم فایل bundle.js که به رنگ زرد درآمده از بودجه تعیین شده فراتر رفته است ❗

حد پیش‌فرض (هم برای دارایی‌ها و هم برای نقاط ورودی) 250 کیلوبایت است. شما می‌توانید اهداف خود را در فایل پیکربندی تنظیم کنید.

گنجاندن بودجه عملکرد در فرایند توسعه سایت — هشدار اندازه بسته وب پک ⚠️

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

اندازه فایل‌ها در حالت فشرده بر زمان انتقال تأثیر می‌گذارد، که در شبکه های کند بسیار مهم است.

ویژگی Bonus: بسته webpack نه تنها به شما هشدار می دهد، بلکه به شما توصیه می کند که چگونه بسته های خود را کوچک کنید. 💁

Bundlesize

Bundlesize یک بسته ساده npm است که اندازه دارایی را با برابر آستانه ای که شما در بودجه کارایی تعیین کرده اید آزمایش می‌کند و می‌تواند به صورت محلی اجرا شود و یا با CI ادغام گردد.

Bundlesize CLI

با تعیین آستانه و فایلی که می‌خواهید آزمایش کنید، Bundlesize CLI را اجرا کنید.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize نتایج آزمون را به صورت رنگی را در یک خط نشان می‌دهد.

Lighthouse CI

می‌توان Lighthouse Ci را با ابزار Travis CI ادغام و بودجه را بر اساس هر یک از پنج پارامتر Lighthouse اعمال کرد. به عنوان مثال، یک بودجه با نمره 100 برای عملکرد Lighthouse و مراقبت از رعایت آن در فرایند توسعه ساده‌تر از بودجه بندی و بررسی تک تک پارامترهای Lighthouse است.

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

پس از استقرار یک سایت در سرور، Lighthouse CI بررسی را شروع می‌کند. در travis.yml برای معیارهای خاص Lighthouse با گزینه های--perf, --a11y, --bp, --seo و --pwa بودجه تعیین کنید. برای مثال می‌توانید با در نظر گفتن 90 به عنوان حداقل امتیاز برای همیشه معیار مورد نظرتان سبز بماند.

جمع‌بندی

ابزار	CLI	CI	خلاصه
Lighthouse	✔️	❌	بودجه برای انواع مختلف منابع بر اساس اندازه یا تعداد آنها.
webpack	✔️	❌	بودجه بر اساس اندازه دارایی های تولید شده توسط وب پک. اندازه های فشرده نشده را بررسی می‌کند.
bundlesize	✔️	✔️	بودجه بر اساس اندازه منابع خاص. اندازه های فشرده یا غیر فشرده را بررسی می‌کند.
Lighthouse ci	❌	✔️	بودجه بر اساس امتیازات Lighthouse.

سوالات متداول :

وب پک Webpack چیست و چرا از آن استفاده کنیم؟

Webpack یک بسته ماژول ایستا برای برنامه های جاوا اسکریپت است – تمام کدهای برنامه شما را می‌گیرد و آن را در یک مرورگر وب قابل استفاده می‌کند. … وقتی Webpack برنامه شما را پردازش می‌کند، یک نمودار وابستگی ایجاد می‌کند که ماژول های مورد نیاز پروژه شما را ترسیم می‌کند و یک یا چند بسته ایجاد می‌کند.

Lighthouse CLI چیست؟

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

بسته npm برای چه مواردی استفاده می‌شود؟

npm مدیر بسته برای پلتفرم Node JavaScript است. این ابزار ماژول ها را در جای خود قرار می‌دهد تا گره بتواند آنها را پیدا کند و تضادهای وابستگی را هوشمندانه مدیریت می‌کند. npm بسیار قابل تنظیم است تا از طیف گسترده ای از موارد استفاده پشتیبانی کند. معمولاً برای انتشار، کشف، نصب و توسعه برنامه های گره استفاده می‌شود.

Travis CI چیست ؟

Travis CI به عنوان یک پلتفرم یکپارچه سازی مداوم، از فرآیند توسعه شما با ایجاد و آزمایش تغییرات کد به طور خودکار پشتیبانی می‌کند و بازخورد فوری در مورد موفقیت تغییر ارائه می‌دهد. Travis CI همچنین می‌تواند سایر بخش‌های فرآیند توسعه شما را با مدیریت استقرارها و اعلان‌ها خودکار کند.