Travis CI এর সাথে bundlesize ব্যবহার করা

Milica Mihajlija

ট্র্যাভিস সিআই (Travis CI)- এর সাথে বান্ডেলসাইজ (bundlesize) ব্যবহার করে আপনি ন্যূনতম সেটআপের মাধ্যমে পারফরম্যান্স বাজেট নির্ধারণ করতে পারেন এবং আপনার ডেভেলপমেন্ট ওয়ার্কফ্লোর অংশ হিসেবে তা প্রয়োগ করতে পারেন। ট্র্যাভিস সিআই হলো একটি পরিষেবা যা প্রতিবার গিটহাবে (GitHub) কোড পুশ করার সময় ক্লাউডে আপনার অ্যাপের জন্য পরীক্ষা চালায়। আপনি আপনার রিপোজিটরি এমনভাবে কনফিগার করতে পারেন যাতে বান্ডেলসাইজ পরীক্ষাগুলো পাস না করা পর্যন্ত এটি পুল-রিকোয়েস্ট মার্জ করার অনুমতি না দেয়।

বান্ডেলসাইজের গিটহাব চেকের মধ্যে মূল শাখার সাথে আকারের তুলনা এবং আকারে বড় ধরনের উল্লম্ফনের ক্ষেত্রে একটি সতর্কবার্তা অন্তর্ভুক্ত থাকে।

এটি বাস্তবে দেখতে, এখানে ওয়েবপ্যাকের সাথে বান্ডেল করা একটি অ্যাপ রয়েছে যা আপনাকে আপনার প্রিয় বিড়ালছানাকে ভোট দিতে দেয়।

পারফরম্যান্স বাজেট নির্ধারণ করুন

এই গ্লিচটিতে ইতিমধ্যেই বান্ডেলসাইজ রয়েছে।

• প্রজেক্টটি সম্পাদনাযোগ্য করতে রিমিক্স টু এডিট-এ ক্লিক করুন।

এই অ্যাপটির মূল বান্ডেলটি পাবলিক ফোল্ডারে রয়েছে। এর সাইজ পরীক্ষা করার জন্য, package.json ফাইলে নিম্নলিখিত সেকশনটি যোগ করুন:

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

সংকুচিত জাভাস্ক্রিপ্ট বান্ডেলের আকার প্রস্তাবিত সীমার মধ্যে রাখতে, maxSize ফিল্ডে পারফরম্যান্স বাজেট ১৭০KB-তে সেট করুন।

বান্ডেলসাইজ গ্লোব প্যাটার্ন সমর্থন করে এবং ফাইল পাথে থাকা * ওয়াইল্ডকার্ড ক্যারেক্টারটি পাবলিক ফোল্ডারের সমস্ত বান্ডেল নামের সাথে মিলে যাবে।

একটি টেস্ট স্ক্রিপ্ট তৈরি করুন

যেহেতু ট্র্যাভিস চালানোর জন্য একটি টেস্ট প্রয়োজন, তাই package.json এ একটি টেস্ট স্ক্রিপ্ট যোগ করুন:

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

নিরবচ্ছিন্ন ইন্টিগ্রেশন সেট আপ করুন

গিটহাব এবং ট্র্যাভিস সিআই একীভূত করুন

প্রথমে, আপনার গিটহাব অ্যাকাউন্টে এই প্রজেক্টটির জন্য একটি নতুন রিপোজিটরি তৈরি করুন এবং একটি README.md দিয়ে এটি চালু করুন।

আপনাকে ট্র্যাভিসে একটি অ্যাকাউন্ট নিবন্ধন করতে হবে এবং আপনার প্রোফাইলের সেটিংস বিভাগে গিটহাব অ্যাপস ইন্টিগ্রেশন সক্রিয় করতে হবে।

আপনার একটি অ্যাকাউন্ট তৈরি হয়ে গেলে, আপনার প্রোফাইলের অধীনে থাকা সেটিংস- এ যান, সিঙ্ক অ্যাকাউন্ট বোতামে ক্লিক করুন এবং নিশ্চিত করুন যে আপনার নতুন রেপোটি ট্র্যাভিস-এ তালিকাভুক্ত আছে।

পুল রিকোয়েস্টে পোস্ট করার জন্য বান্ডেলসাইজকে অনুমোদন দিন।

পুল রিকোয়েস্টে পোস্ট করার জন্য বান্ডেলসাইজের অনুমোদনের প্রয়োজন হয়, তাই বান্ডেলসাইজ টোকেনটি পেতে এই লিঙ্কে যান, যা ট্র্যাভিস কনফিগারেশনে সংরক্ষিত থাকবে।

আপনার প্রোজেক্টের ট্র্যাভিস ড্যাশবোর্ডে, আরও বিকল্প > সেটিংস > পরিবেশ ভেরিয়েবল- এ যান।

একটি নতুন এনভায়রনমেন্ট ভেরিয়েবল যোগ করুন, যেখানে ভ্যালু ফিল্ড হিসেবে টোকেনটি এবং নাম হিসেবে BUNDLESIZE_GITHUB_TOKEN থাকবে।

কন্টিনিউয়াস ইন্টিগ্রেশন শুরু করার জন্য আপনার সর্বশেষ যে জিনিসটি প্রয়োজন তা হলো একটি .travis.yml ফাইল, যা ট্র্যাভিস সিআই-কে (Travis CI) বলে দেয় কী করতে হবে। কাজ দ্রুত করার জন্য, এটি প্রজেক্টে আগে থেকেই অন্তর্ভুক্ত থাকে এবং এটি নির্দিষ্ট করে দেয় যে অ্যাপটি নোডজেএস (NodeJS) ব্যবহার করছে।

এই ধাপটির মাধ্যমে আপনার প্রস্তুতি সম্পন্ন হবে এবং আপনার জাভাস্ক্রিপ্ট কখনো নির্ধারিত বাজেট অতিক্রম করলে বান্ডেলসাইজ আপনাকে সতর্ক করবে। শুরুতে সবকিছু দারুণভাবে চললেও, সময়ের সাথে সাথে নতুন ফিচার যোগ করার ফলে কিলোবাইটের পরিমাণ বাড়তে পারে। স্বয়ংক্রিয় পারফরম্যান্স বাজেট পর্যবেক্ষণের মাধ্যমে আপনি নিশ্চিন্ত থাকতে পারেন যে, এই বিষয়টি কারো নজর এড়াবে না।

চেষ্টা করে দেখুন

আপনার প্রথম বান্ডেল সাইজ পরীক্ষাটি চালু করুন

অ্যাপটি পারফরম্যান্স বাজেটের তুলনায় কেমন কাজ করছে তা দেখতে, ধাপ ৩-এ তৈরি করা গিটহাব রিপোজিটরিতে কোডটি যোগ করুন।

1. Glitch-এ, Tools > Git, Import, and Export > Export to GitHub-এ ক্লিক করুন।

2. পপ-আপে, আপনার গিটহাব ইউজারনেম এবং রিপোজিটরির নাম username/repo হিসেবে লিখুন। গ্লিচ আপনার অ্যাপটিকে 'glitch' নামের একটি নতুন ব্রাঞ্চে এক্সপোর্ট করবে।

3. রিপোজিটরির হোমপেজে থাকা ' New pull request' বাটনে ক্লিক করে একটি নতুন পুল রিকোয়েস্ট তৈরি করুন।

এখন থেকে আপনি পুল রিকোয়েস্ট পেজে চলমান স্ট্যাটাস চেকগুলো দেখতে পাবেন।

সমস্ত যাচাই সম্পন্ন হতে বেশি সময় লাগবে না। দুর্ভাগ্যবশত, বিড়াল ভোটিং অ্যাপটি কিছুটা ভারী এবং পারফরম্যান্স বাজেট যাচাইয়ে উত্তীর্ণ হতে পারেনি। মূল বান্ডেলটি ২৬৬ কেবি এবং বাজেট হলো ১৭০ কেবি।

অপ্টিমাইজ করুন

সৌভাগ্যবশত, অব্যবহৃত কোড সরিয়ে দিয়ে সহজেই পারফরম্যান্সের উন্নতি করা যায়। src/index.js এ দুটি প্রধান ইম্পোর্ট রয়েছে:

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

অ্যাপটি ডেটা সংরক্ষণের জন্য ফায়ারবেস রিয়েলটাইম ডেটাবেস ব্যবহার করছে, কিন্তু এটি সম্পূর্ণ ফায়ারবেস প্যাকেজটি ইম্পোর্ট করছে, যেটিতে শুধু ডেটাবেসের চেয়েও আরও অনেক কিছু রয়েছে (যেমন অথেন্টিকেশন, স্টোরেজ, মেসেজিং ইত্যাদি)।

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. গিটহাবের পুল রিকোয়েস্ট পেজে যান এবং সমস্ত যাচাই প্রক্রিয়া শেষ হওয়া পর্যন্ত অপেক্ষা করুন।

সফল! বান্ডেলটির নতুন সাইজ ১২৫.৫ কেবি এবং সমস্ত যাচাই সম্পন্ন হয়েছে। 🎉

Firebase-এর মতো moment লাইব্রেরির অংশবিশেষ ইম্পোর্ট করা অত সহজে করা যায় না, তবে চেষ্টা করে দেখতে পারেন। Remove unused code কোডল্যাবে দেখে নিন কীভাবে আপনি অ্যাপটিকে আরও অপ্টিমাইজ করতে পারেন।

মনিটর

অ্যাপটি এখন বাজেটের মধ্যে আছে এবং সবকিছু ঠিক আছে। ট্র্যাভিস সিআই (Travis CI) এবং বান্ডেলসাইজ (bundlesize) আপনার জন্য পারফরম্যান্স বাজেট নিরীক্ষণ করতে থাকবে, যা আপনার অ্যাপকে দ্রুতগতিসম্পন্ন রাখবে।