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

Milica Mihajlija

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

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

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

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

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

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

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

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

หากต้องการให้ขนาดกลุ่ม JavaScript ที่บีบอัดไม่เกินขีดจํากัดที่แนะนํา ให้ตั้งงบประมาณด้านประสิทธิภาพเป็น 170 KB ในช่อง 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 จะส่งออกแอปไปยังสาขาใหม่ชื่อ "glitch"

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

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

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

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

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

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 และผ่านการตรวจสอบทั้งหมดแล้ว 🎉

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

ติดตามดู

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