استفاده از bundlesize با Travis CI

Milica Mihajlija

استفاده از bundlesize به همراه Travis CI به شما امکان می‌دهد بودجه‌های عملکردی را با حداقل تنظیمات تعریف کنید و آنها را به عنوان بخشی از گردش کار توسعه خود اجرا کنید. Travis CI سرویسی است که هر بار که کد را به GitHub ارسال می‌کنید، تست‌هایی را برای برنامه شما در فضای ابری اجرا می‌کند. می‌توانید مخزن خود را طوری پیکربندی کنید که اجازه ادغام درخواست‌های pull را ندهد، مگر اینکه تست‌های bundlesize با موفقیت انجام شده باشند.

بررسی‌های گیت‌هاب Bundlesize شامل مقایسه اندازه با شاخه اصلی و هشدار در صورت افزایش زیاد اندازه است.

برای اینکه آن را در عمل ببینید، در اینجا یک برنامه همراه با webpack ارائه شده است که به شما امکان می‌دهد به گربه مورد علاقه خود رأی دهید .

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

این خطای قطعی از قبل شامل bundlesize است.

• برای قابل ویرایش کردن پروژه، روی «Remix to Edit» کلیک کنید.

بسته اصلی این برنامه در پوشه public قرار دارد. برای آزمایش حجم آن، بخش زیر را به فایل package.json اضافه کنید:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

برای اینکه اندازه بسته فشرده‌شده جاوااسکریپت کمتر از حد توصیه‌شده باشد، بودجه عملکرد را در فیلد maxSize روی ۱۷۰ کیلوبایت تنظیم کنید.

Bundlesize از الگوهای glob پشتیبانی می‌کند و کاراکتر wildcard * در مسیر فایل با تمام نام‌های بسته در پوشه public مطابقت خواهد داشت.

ایجاد یک اسکریپت آزمایشی

از آنجایی که تراویس برای اجرا به یک تست نیاز دارد، یک اسکریپت تست به package.json اضافه کنید:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

یکپارچه‌سازی مداوم را راه‌اندازی کنید

ادغام گیت‌هاب و Travis CI

ابتدا، یک مخزن جدید برای این پروژه در حساب GitHub خود ایجاد کنید و آن را با README.md مقداردهی اولیه کنید.

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

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

به bundlesize اجازه دهید تا در درخواست‌های pull پست ارسال کند

Bundlesize برای ارسال درخواست‌های pull نیاز به مجوز دارد، بنابراین برای دریافت توکن bundlesize که در پیکربندی Travis ذخیره خواهد شد، به این لینک مراجعه کنید .

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

یک متغیر محیطی جدید با توکن به عنوان فیلد مقدار و BUNDLESIZE_GITHUB_TOKEN به عنوان نام اضافه کنید.

آخرین چیزی که برای شروع یکپارچه‌سازی مداوم نیاز دارید، یک فایل .travis.yml است که به Travis CI می‌گوید چه کاری انجام دهد. برای سرعت بخشیدن به کارها، این فایل از قبل در پروژه گنجانده شده است و مشخص می‌کند که برنامه از NodeJS استفاده می‌کند.

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

امتحانش کن.

اولین تست bundlesize خود را اجرا کنید

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

1. در Glitch، روی Tools > Git, Import, and Export > Export to GitHub کلیک کنید.

2. در پنجره باز شده، نام کاربری GitHub خود و نام مخزن را به صورت username/repo وارد کنید. Glitch برنامه شما را به شاخه جدیدی به نام "glitch" صادر می‌کند.

3. با کلیک روی دکمه‌ی « درخواست جدید برای دریافت» (New pull request) در صفحه‌ی اصلی مخزن، یک درخواست دریافت جدید ایجاد کنید.

اکنون در صفحه درخواست pull، بررسی وضعیت در حال انجام را مشاهده خواهید کرد.

خیلی طول نمی‌کشد تا همه بررسی‌ها انجام شود. متأسفانه، برنامه رأی‌گیری گربه کمی حجیم است و از بررسی بودجه عملکرد عبور نمی‌کند. حجم بسته اصلی ۲۶۶ کیلوبایت و حجم بودجه ۱۷۰ کیلوبایت است.

بهینه سازی

خوشبختانه، با حذف کدهای بلااستفاده می‌توانید به راحتی به بهبود عملکرد دست پیدا کنید. دو import اصلی در src/index.js وجود دارد:

import firebase from "firebase";
import * as moment from 'moment';

این برنامه از پایگاه داده Firebase Realtime برای ذخیره داده‌ها استفاده می‌کند، اما کل بسته firebase را که شامل موارد بسیار بیشتری از یک پایگاه داده (احراز هویت، ذخیره‌سازی، پیام‌رسانی و غیره) است، وارد می‌کند.

این مشکل را با وارد کردن فقط بسته‌ای که برنامه به آن نیاز دارد در فایل src/index.js برطرف کنید:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

آزمایش مجدد

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

1. روی دکمه ابزارها کلیک کنید.

2. سپس روی دکمه کنسول کلیک کنید. این کار کنسول را در یک تب دیگر باز می‌کند.

3. در کنسول، webpack را تایپ کنید و منتظر بمانید تا ساخت آن تمام شود.

4. کد را از طریق Tools > Git, Import, and Export > Export to GitHub به GitHub صادر کنید.

5. به صفحه درخواست pull در گیت‌هاب بروید و منتظر بمانید تا همه بررسی‌ها تمام شود.

موفقیت! حجم جدید بسته ۱۲۵.۵ کیلوبایت است و تمام بررسی‌ها با موفقیت انجام شده است. 🎉

برخلاف فایربیس، وارد کردن بخش‌هایی از کتابخانه‌ی moment به این راحتی‌ها انجام نمی‌شود، اما ارزش امتحان کردن را دارد. ببینید چگونه می‌توانید برنامه را در Codelab حذف کدهای استفاده نشده بیشتر بهینه‌سازی کنید.

مانیتور

برنامه اکنون زیر بودجه است و همه چیز خوب است. Travis CI و bundlesize به نظارت بر بودجه عملکرد برای شما ادامه می‌دهند و مطمئن می‌شوند که برنامه شما سریع باقی می‌ماند.