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

Milica Mihajlija

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

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

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

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

این اشکال از قبل دارای اندازه بسته است.

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

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

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

برای نگه داشتن اندازه فشرده جاوا اسکریپت زیر حد توصیه شده ، بودجه عملکرد را در قسمت maxSize روی 170 کیلوبایت تنظیم کنید.

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

یک اسکریپت تست ایجاد کنید

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

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

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

GitHub و Travis CI را ادغام کنید

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

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

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

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

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

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

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

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

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

آن را امتحان کنید

اولین آزمایش باندلز خود را آغاز کنید

برای اینکه ببینید برنامه در برابر بودجه عملکرد چگونه است، کد را به مخزن GitHub که در مرحله 3 ایجاد کردید اضافه کنید.

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

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

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

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

زمان زیادی طول نمی کشد تا تمام بررسی ها انجام شود. متأسفانه، برنامه رأی گیری گربه کمی پف کرده است و بررسی بودجه عملکرد را پاس نمی کند. بسته اصلی 266 کیلوبایت و بودجه آن 170 کیلوبایت است.

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

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

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

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

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

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

تست را دوباره اجرا کنید

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

1. روی دکمه Tools کلیک کنید.

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

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

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

5. به صفحه درخواست کشش در GitHub بروید و منتظر بمانید تا تمام بررسی ها به پایان برسد.

موفقیت! حجم جدید باندل 125.5 کیلوبایت است و تمامی بررسی ها به پایان رسیده است. 🎉

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

نظارت کنید

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