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

Milica Mihajlija

Webpack تمام فایل های وارد شده شما را ترکیب می کند و آنها را در یک یا چند فایل خروجی به نام بسته بندی می کند. بسته‌بندی مرتب است، اما با رشد برنامه، بسته‌های شما نیز رشد خواهند کرد. شما باید اندازه بسته‌ها را زیر نظر داشته باشید تا مطمئن شوید که آنها خیلی بزرگ نمی‌شوند و بر مدت زمان بارگذاری برنامه شما تأثیر نمی‌گذارند. Webpack از تنظیم بودجه عملکرد بر اساس اندازه دارایی پشتیبانی می کند و می تواند اندازه های بسته را برای شما زیر نظر داشته باشد.

برای اینکه آن را در عمل ببینید، در اینجا برنامه ای وجود دارد که روزهای باقی مانده تا سال نو را می شمارد. با React و moment.js ساخته شده است. (درست مانند برنامه های دنیای واقعی که به طور فزاینده ای به چارچوب ها و کتابخانه ها متکی هستند. 😉)

اندازه گیری کنید

این کد لبه قبلاً حاوی برنامه همراه با بسته وب است.

1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
2. روی ترمینال کلیک کنید (توجه: اگر دکمه ترمینال نشان داده نشد، ممکن است لازم باشد از گزینه تمام صفحه استفاده کنید).
3. برای دریافت لیست دارای کد رنگی و اندازه آنها، webpack در کنسول تایپ کنید.

webpack

بسته اصلی با رنگ زرد مشخص شده است زیرا بزرگتر از 244 کیلوبایت (250 کیلوبایت) است.

این هشدارها به طور پیش‌فرض در حالت تولید فعال می‌شوند و آستانه پیش‌فرض 244 کیلوبایت فشرده نشده است ، هم برای دارایی‌ها و هم برای نقاط ورودی (ترکیبی از همه دارایی‌های مورد استفاده در بارگذاری اولیه یک صفحه).

Webpack نه تنها به شما هشدار می دهد، بلکه به شما توصیه می کند که چگونه بسته های خود را کوچک کنید. می‌توانید درباره تکنیک‌های توصیه‌شده در Web Fundamentals بیشتر بیاموزید.

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

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

برای این نسخه ی نمایشی ساده، سعی کنید حتی محافظه کارانه تر باشید و بودجه را روی 100 کیلوبایت (97.7 کیلوبایت) تنظیم کنید. در webpack.config.js موارد زیر را اضافه کنید:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

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

• 100000 بایت برای دارایی های فردی (maxAssetSize)
• 100000 بایت برای نقطه ورودی (maxEntrypointSize)

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

مقادیر ممکن برای نکات عبارتند از:

1. warning (پیش‌فرض): یک پیغام هشدار زرد نشان می‌دهد، اما build می‌گذرد. بهتر است از این در محیط های توسعه استفاده کنید.
2. error : یک پیغام خطای قرمز را نمایش می دهد، اما ساخت همچنان پاس می شود. این تنظیم برای ساخت های تولیدی توصیه می شود.
3. false : هیچ هشدار یا خطایی نشان داده نمی شود.

بهینه سازی کنید

هدف از بودجه عملکرد این است که به شما در مورد مسائل مربوط به عملکرد هشدار دهد قبل از اینکه رفع آنها خیلی سخت شود. همیشه بیش از یک راه برای ساختن یک اپلیکیشن وجود دارد و برخی از تکنیک ها زمان بارگذاری سریع تری را به همراه خواهند داشت. (بسیاری از آنها در اینجا در بهینه سازی جاوا اسکریپت شما مستند شده اند. 🤓)

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

در دنیای واقعی، فریم ورک های بزرگ سمت مشتری معمولاً به سختی تعویض می شوند، بنابراین استفاده عاقلانه از آنها مهم است. با کمی تحقیق، اغلب می‌توانید جایگزین‌های کوچک‌تری برای کتابخانه‌های محبوب بیابید که این کار را به خوبی انجام می‌دهند ( date-fns جایگزین خوبی برای moment.js است). گاهی اوقات منطقی تر است که از یک چارچوب یا کتابخانه استفاده نکنید، اگر تأثیر قابل توجهی در عملکرد داشته باشد.

حذف کدهای استفاده نشده روش خوبی برای بهینه سازی برنامه هایی است که شامل کتابخانه های بزرگ شخص ثالث است. راهنمای Remove unused code این فرآیند را با جزئیات توضیح می دهد و در اینجا یک راه سریع برای بازنویسی کد شمارش معکوس بدون استفاده از moment.js وجود دارد.

در app/components/Countdown.jsx حذف کنید:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

و این خط را حذف کنید:

const moment = require('moment');

کمی ریاضی طول می کشد، اما می توانید همان شمارش معکوس را با وانیلی جاوا اسکریپت اجرا کنید:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

اکنون moment.js از package.json حذف کرده و مجدداً webpack را در کنسول اجرا کنید تا بسته بهینه شده را بسازید.

تا-دا! شما 223 کیلوبایت (230 کیلوبایت) را حذف کرده اید و برنامه کم بودجه است.🎉

نظارت کنید

تنظیم بودجه عملکرد در وب پک تنها به چند خط کد نیاز دارد و اگر (به طور تصادفی) وابستگی بزرگی را اضافه کنید به شما هشدار می دهد. ضرب المثل "خارج از دید، دور از ذهن" می گوید، اما وب پک می تواند اطمینان حاصل کند که شما همیشه از مفاهیم عملکرد آگاه هستید.