Sử dụng kích thước gói với Travis CI

Milica Mihajlija

Việc sử dụng bundlesize với Travis CI cho phép bạn xác định ngân sách hiệu suất mà không cần thiết lập nhiều và thực thi các ngân sách đó trong quy trình phát triển. Travis CI là một dịch vụ chạy kiểm thử cho ứng dụng của bạn trên đám mây mỗi khi bạn đẩy mã lên GitHub. Bạn có thể định cấu hình kho lưu trữ để kho lưu trữ đó không cho phép hợp nhất các yêu cầu kéo trừ phi các kiểm thử kích thước gói đã vượt qua.

Các bước kiểm tra GitHub của Bundlesize bao gồm việc so sánh kích thước với nhánh chính và cảnh báo trong trường hợp kích thước tăng lên đáng kể.

Kiểm tra kích thước gói trên GitHub

Để xem tính năng này trong thực tế, sau đây là một ứng dụng đi kèm với webpack cho phép bạn bình chọn cho chú mèo mà mình yêu thích.

Ứng dụng bỏ phiếu cho mèo

Đặt ngân sách hiệu suất

Nhiễu này đã chứa kích thước gói.

  • Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.

Gói chính của ứng dụng này nằm trong thư mục công khai. Để kiểm thử kích thước, hãy thêm phần sau vào tệp package.json:

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

Để duy trì kích thước gói JavaScript nén theo giới hạn đề xuất, hãy đặt ngân sách hiệu suất thành 170 KB trong trường maxSize.

Bundlesize hỗ trợ mẫu glob và ký tự đại diện * trong đường dẫn tệp sẽ khớp với tất cả tên gói trong thư mục công khai.

Tạo tập lệnh kiểm thử

Vì Travis cần một chương trình kiểm thử để chạy, hãy thêm một tập lệnh kiểm thử vào package.json:

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

Thiết lập quá trình tích hợp liên tục

Tích hợp GitHub và Travis CI

Trước tiên, hãy tạo một kho lưu trữ mới cho dự án này trên tài khoản GitHub và khởi động kho lưu trữ đó bằng README.md.

Bạn cần đăng ký tài khoản trên Travis và kích hoạt tính năng tích hợp GitHub Apps trong phần Cài đặt của hồ sơ.

Tích hợp GitHub Apps trên Travis CI

Sau khi có tài khoản, hãy chuyển đến phần Cài đặt trong hồ sơ của bạn, nhấp vào nút Đồng bộ hoá tài khoản và đảm bảo kho lưu trữ mới của bạn được liệt kê trên Travis.

Nút Đồng bộ hoá Travis CI

Cho phép Bundlesize đăng trên các yêu cầu lấy dữ liệu

Bundlesize cần được uỷ quyền để có thể đăng trên các yêu cầu kéo, vì vậy, hãy truy cập vào đường liên kết này để lấy mã thông báo bundlesize sẽ được lưu trữ trong cấu hình Travis.

mã thông báo bundlesize

Trong trang tổng quan Travis của dự án, hãy chuyển đến Tuỳ chọn khác > Cài đặt > Biến môi trường.

Thêm biến môi trường trên Travis CI

Thêm một biến môi trường mới với mã thông báo làm trường giá trị và tên là BUNDLESIZE_GITHUB_TOKEN.

Điều cuối cùng bạn cần để bắt đầu quá trình tích hợp liên tục là tệp .travis.yml. Tệp này cho Travis CI biết việc cần làm. Để tăng tốc, tệp này đã được đưa vào dự án và chỉ định rằng ứng dụng đang sử dụng NodeJS.

Với bước này, bạn đã hoàn tất việc thiết lập và kích thước gói sẽ cảnh báo cho bạn nếu JavaScript của bạn vượt quá ngân sách. Ngay cả khi bạn khởi đầu thuận lợi thì theo thời gian, khi bạn thêm tính năng mới, kilobyte có thể tăng dần. Với tính năng tự động theo dõi ngân sách hiệu suất, bạn có thể yên tâm rằng ngân sách này sẽ không bị bỏ qua.

Dùng thử

Kích hoạt kiểm thử kích thước gói đầu tiên

Để xem ứng dụng so với ngân sách hiệu suất, hãy thêm mã vào kho lưu trữ GitHub mà bạn đã tạo ở bước 3.

  1. Trên Glitch, hãy nhấp vào Tools (Công cụ) > Git, Import, and Export (Git, Nhập và Xuất) > Export to GitHub (Xuất sang GitHub).

  2. Trong cửa sổ bật lên, hãy nhập tên người dùng GitHub và tên kho lưu trữ là username/repo. Glitch sẽ xuất ứng dụng của bạn sang một nhánh mới có tên là "glitch".

  3. Tạo một yêu cầu lấy dữ liệu (pull request) mới bằng cách nhấp vào nút Newpu request (Yêu cầu lấy dữ liệu mới) trên trang chủ của kho lưu trữ.

Giờ đây, bạn sẽ thấy các bước kiểm tra trạng thái đang diễn ra trên trang yêu cầu lấy dữ liệu.

Đang kiểm tra trên GitHub

Sẽ không mất nhiều thời gian cho đến khi tất cả các bước kiểm tra được hoàn tất. Rất tiếc, ứng dụng bình chọn mèo hơi cồng kềnh và không vượt qua được quy trình kiểm tra ngân sách hiệu suất. Gói chính là 266 KB và ngân sách là 170 KB.

Không kiểm tra được kích thước gói

Tối ưu hoá

May mắn thay, bạn có thể dễ dàng cải thiện hiệu suất bằng cách xoá mã không dùng đến. Có hai lệnh nhập chính trong src/index.js:

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

Ứng dụng đang sử dụng Cơ sở dữ liệu theo thời gian thực của Firebase để lưu trữ dữ liệu, nhưng sẽ nhập toàn bộ gói Firebase bao gồm nhiều thứ hơn là chỉ cơ sở dữ liệu (xác thực, bộ nhớ, thông báo, v.v.).

Khắc phục vấn đề này bằng cách chỉ nhập gói mà ứng dụng cần trong tệp src/index.js:

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

Chạy lại kiểm thử

Vì tệp nguồn đã được cập nhật, nên bạn cần chạy webpack để tạo tệp gói mới.

  1. Nhấp vào nút Công cụ.

  2. Sau đó, hãy nhấp vào nút Bảng điều khiển. Thao tác này sẽ mở bảng điều khiển trong một thẻ khác.

  3. Trong bảng điều khiển, hãy nhập webpack rồi đợi quá trình tạo hoàn tất.

  4. Xuất mã sang GitHub trong phần Tools > Git, Import và Export > Export to GitHub (Xuất sang GitHub).

  5. Chuyển đến trang yêu cầu gộp trên GitHub và đợi tất cả các bước kiểm tra hoàn tất.

Đã vượt qua quy trình kiểm tra kích thước gói

Thành công! Kích thước mới của gói là 125,5 KB và đã vượt qua tất cả các bước kiểm tra. 🎉

Không giống như Firebase, bạn không thể nhập các phần của thư viện khoảnh khắc dễ dàng, nhưng vẫn đáng thử. Xem cách bạn có thể tối ưu hoá ứng dụng hơn nữa trong Lớp học lập trình về xoá mã không dùng đến.

Giám Sát

Ứng dụng hiện đã nằm trong ngân sách và mọi thứ đều ổn. Travis CI và bundlesize sẽ tiếp tục theo dõi ngân sách hiệu suất cho bạn, đảm bảo ứng dụng của bạn luôn chạy nhanh.