การใช้bundlesize กับ Travis CI

Milica Mihajlija

การใช้ bundlesize กับ Travis CI ช่วยให้คุณกําหนดงบประมาณด้านประสิทธิภาพได้ด้วยการตั้งค่าขั้นต่ำและบังคับใช้งบประมาณดังกล่าวเป็นส่วนหนึ่งของเวิร์กโฟลว์การพัฒนา Travis CI เป็นบริการที่เรียกใช้การทดสอบแอปในระบบคลาวด์ทุกครั้งที่คุณพุชโค้ดไปยัง GitHub คุณสามารถกำหนดค่าที่เก็บข้อมูลเพื่อไม่ให้อนุญาตให้ผสานคำขอดึงข้อมูลได้เว้นแต่การทดสอบขนาดแพ็กเกจจะผ่าน

การตรวจสอบ GitHub ของ Bundlesize จะมีการเปรียบเทียบขนาดกับ Branch หลักและคำเตือนในกรณีที่พื้นที่เพิ่มขึ้นอย่างมาก

หากต้องการดูวิธีการใช้งาน ต่อไปนี้คือแอปที่รวมอยู่กับ webpack ซึ่งให้คุณโหวตหาแมวตัวโปรด

กำหนดงบประมาณด้านประสิทธิภาพ

ข้อบกพร่องนี้มี bundlesize อยู่แล้ว

• คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้

แพ็กเกจหลักของแอปนี้จะอยู่ในโฟลเดอร์สาธารณะ หากต้องการทดสอบขนาด ให้เพิ่มส่วนต่อไปนี้ลงในไฟล์ package.json

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

หากต้องการให้ขนาดกลุ่ม JavaScript ที่บีบอัดให้ไม่เกินขีดจำกัดที่แนะนำ ให้กำหนดงบประมาณด้านประสิทธิภาพเป็น 170KB ในช่อง maxSize

Bundlesize รองรับรูปแบบ glob และอักขระไวลด์การ์ด * ในเส้นทางไฟล์จะตรงกับชื่อแพ็กเกจทั้งหมดในโฟลเดอร์สาธารณะ

สร้างสคริปต์ทดสอบ

เนื่องจาก Travis ต้องทำการทดสอบ ให้เพิ่มสคริปต์ทดสอบไปยัง package.json ดังนี้

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

ตั้งค่าการรวมอย่างต่อเนื่อง

ผสานรวม GitHub กับ Travis CI

ก่อนอื่นให้สร้างที่เก็บใหม่สำหรับโปรเจ็กต์นี้ในบัญชี GitHub แล้วเริ่มต้นด้วย README.md

คุณจะต้องลงทะเบียนบัญชีใน GitHub และเปิดใช้งานการผสานรวมแอป GitHub ในส่วนการตั้งค่าของโปรไฟล์

เมื่อสร้างบัญชีแล้ว ให้ไปที่การตั้งค่าในโปรไฟล์ คลิกปุ่มซิงค์บัญชี และตรวจสอบว่ารีโปใหม่แสดงอยู่ใน Travis

ให้สิทธิ์ bundlesize ในการโพสต์ในคำขอดึงข้อมูล

Bundlesize จำเป็นต้องได้รับสิทธิ์จึงจะโพสต์ในคำขอดึงข้อมูลได้ ดังนั้นโปรดไปที่ลิงก์นี้เพื่อรับโทเค็น Bundlesize ที่ระบบจะจัดเก็บไว้ในการกำหนดค่า Travis

ในหน้าแดชบอร์ด Travis ของโปรเจ็กต์ ให้ไปที่ตัวเลือกเพิ่มเติม > การตั้งค่า > ตัวแปรสภาพแวดล้อม

เพิ่มตัวแปรสภาพแวดล้อมใหม่ด้วยโทเค็นเป็นช่องค่า และ BUNDLESIZE_GITHUB_TOKEN เป็นชื่อ

สิ่งสุดท้ายที่คุณต้องเริ่มต้นการผสานรวมอย่างต่อเนื่องคือไฟล์ .travis.yml ซึ่งจะบอก Travis CI ถึงสิ่งที่ต้องทำ เพื่อเร่งการทำงาน ไฟล์จะรวมอยู่ในโปรเจ็กต์แล้วและระบุให้แอปใช้ NodeJS

ขั้นตอนนี้ถือเป็นการตั้งค่าเสร็จสมบูรณ์แล้ว และ Bundlesize จะเตือนคุณหาก JavaScript เกินงบประมาณ แม้ว่าคุณจะเริ่มต้นได้ดี แต่เมื่อเวลาผ่านไปและคุณเพิ่มฟีเจอร์ใหม่ๆ เข้าไป น้ำหนักของไฟล์ก็อาจเพิ่มขึ้นเรื่อยๆ การตรวจสอบประสิทธิภาพและงบประมาณอัตโนมัติช่วยให้คุณมั่นใจได้ว่าทุกอย่างจะได้รับการติดตาม

ลองเลย

เรียกใช้การทดสอบขนาดแพ็กเกจครั้งแรก

หากต้องการดูว่าแอปมีประสิทธิภาพเป็นอย่างไรเมื่อเทียบกับงบประมาณด้านประสิทธิภาพ ให้เพิ่มโค้ดลงในที่เก็บ GitHub ที่คุณสร้างไว้ในขั้นตอนที่ 3

1. ใน Glitch ให้คลิกเครื่องมือ > Git, นำเข้า และส่งออก > ส่งออกไปยัง GitHub

2. ในป๊อปอัป ให้ป้อนชื่อผู้ใช้ GitHub และชื่อรีโปเป็น username/repo Glitch จะส่งออกแอปไปยัง Branch ใหม่ที่ชื่อ "glitch"

3. สร้างคำขอดึงข้อมูลใหม่โดยคลิกปุ่มคำขอดึงข้อมูลใหม่ในหน้าแรกของที่เก็บข้อมูล

ตอนนี้คุณจะเห็นการตรวจสอบสถานะอยู่ระหว่างดำเนินการในหน้าการดึงคำขอ

การตรวจสอบจะใช้เวลาไม่นาน ขออภัย แอปโหวตแมวมีขนาดใหญ่เกินไปและไม่ผ่านการตรวจสอบงบประมาณด้านประสิทธิภาพ กลุ่มหลักมีขนาด 266 KB และงบประมาณคือ 170 KB

เพิ่มประสิทธิภาพ

แต่โชคดีที่คุณยังสามารถเพิ่มประสิทธิภาพได้ง่ายๆ ด้วยการนำโค้ดที่ไม่ได้ใช้ออก มีการนำเข้าหลักๆ 2 รายการใน src/index.js ได้แก่

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

แอปใช้ Firebase Realtime Database เพื่อจัดเก็บข้อมูล แต่กำลังนำเข้าแพ็กเกจ Firebase ทั้งหมดซึ่งมีมากกว่าแค่ฐานข้อมูล (การตรวจสอบสิทธิ์ พื้นที่เก็บข้อมูล การรับส่งข้อความ ฯลฯ)

แก้ไขปัญหานี้โดยนําเข้าเฉพาะแพ็กเกจที่จําเป็นสําหรับแอปในไฟล์ src/index.js ดังนี้

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

ดำเนินการทดสอบอีกครั้ง

เนื่องจากมีการอัปเดตไฟล์แหล่งที่มา คุณจึงต้องเรียกใช้ Webpack เพื่อสร้างไฟล์แพ็กเกจใหม่

1. คลิกปุ่มเครื่องมือ

2. จากนั้นคลิกปุ่มคอนโซล ซึ่งจะเป็นการเปิดคอนโซลในแท็บอื่น

3. พิมพ์ webpack ในคอนโซลและรอให้การสร้างเสร็จสมบูรณ์

4. ส่งออกโค้ดไปยัง GitHub จากเครื่องมือ > Git, นำเข้า และส่งออก > ส่งออกไปยัง GitHub

5. ไปที่หน้าคำขอดึงข้อมูลใน GitHub และรอให้การตรวจสอบทั้งหมดเสร็จสิ้น

สำเร็จ! ขนาดใหม่ของกลุ่มคือ 125.5 KB และผ่านการตรวจสอบทั้งหมดแล้ว 🎉

การนําเข้าบางส่วนของไลบรารีช่วงเวลาทําได้ยากกว่า Firebase แต่คุณก็ลองดูได้ ดูวิธีเพิ่มประสิทธิภาพแอปเพิ่มเติมใน Remove unused code codelab

ติดตามดู

ขณะนี้แอปอยู่ภายใต้งบประมาณและทุกอย่างเรียบร้อยดี Travis CI และ Bundlesize จะคอยตรวจสอบงบประมาณด้านประสิทธิภาพให้คุณเพื่อให้แอปของคุณทำงานฉับไว