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

Milica Mihajlija

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

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

หากต้องการดูการทำงานของ Bundlesize ให้ดูแอปที่รวมกับ Webpack ซึ่งช่วยให้คุณโหวตแมวตัวโปรด ได้

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

Glitch นี้ มี 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

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

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

ให้สิทธิ์ Bundlesize ในการโพสต์ใน Pull Request

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

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

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

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

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

ลองเลย

เริ่มการทดสอบ Bundlesize ครั้งแรก

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

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

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

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

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

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

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

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

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';

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

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

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

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

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

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

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

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

การนำเข้าบางส่วนของไลบรารี Moment ทำได้ไม่ง่ายนักเมื่อเทียบกับ Firebase แต่ก็คุ้มค่าที่จะลอง ดูวิธีเพิ่มประสิทธิภาพแอปเพิ่มเติมได้ใน Codelab นำโค้ดที่ไม่ได้ใช้ออก

ตรวจสอบ

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