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

Milica Mihajlija

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

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

การตรวจสอบขนาด Bundle ใน GitHub

หากต้องการดูการใช้งานจริง นี่คือแอปที่มาพร้อมกับ Webpack ซึ่งจะช่วยให้คุณโหวตให้แมวเหมียวที่คุณชื่นชอบ

แอปโหวตแมว

ตั้งงบประมาณด้านประสิทธิภาพ

สัญญาณรบกวนนี้มีขนาดกลุ่มอยู่แล้ว

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

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

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

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

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

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

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

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

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

ผสานรวม GitHub และ Travis CI

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

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

การผสานรวมแอป GitHub บน Travis CI

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

ปุ่ม Travis CI Sync

ให้สิทธิ์ Bundlesize เพื่อโพสต์ในคำขอพุล

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

โทเค็น Bundlesize

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

การเพิ่มตัวแปรสภาพแวดล้อมใน Travis CI

เพิ่มตัวแปรสภาพแวดล้อมใหม่โดยมีโทเค็นเป็นช่องค่า และเพิ่ม 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. สร้างการดึงข้อมูลคำขอใหม่โดยคลิกปุ่มคำขอพุลใหม่ในหน้าแรกของที่เก็บ

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

อยู่ระหว่างการตรวจสอบ GitHub

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

การตรวจสอบ Bundlesize ไม่สำเร็จ

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

แต่ก็ยังมีการนำโค้ดที่ไม่ได้ใช้ออก การนำเข้าหลักใน 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. ไปที่หน้าการดึงคำขอบน GitHub แล้วรอให้การตรวจสอบทั้งหมดเสร็จสิ้น

ผ่านการตรวจสอบขนาดกลุ่มแล้ว

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

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

ตรวจสอบ

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