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 với chế độ thiết lập tối thiểu và thực thi ngân sách đó trong quy trình phát triển của mình. Travis CI là một dịch vụ chạy các 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ử bundlesize đã vượt qua.

Các chế độ kiểm tra của Bundlesize trên GitHub bao gồm 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ể.

Để xem cách hoạt động, đâ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 yêu thích của mình.

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

Glitch này đã chứa bundlesize.

• Nhấp vào Phối 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 của vùng nhớ khối xếp, hãy thêm phần sau vào tệp package.json:

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

Để giữ kích thước gói JavaScript đã nén dưới giới hạn được đề 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 một kịch bản kiểm tra

Vì Travis cần một 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 của bạn và khởi tạo 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 Ứng dụng GitHub trong phần Cài đặt của hồ sơ.

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

Uỷ quyền cho bundlesize đăng trên yêu cầu kéo

Bundlesize cần được uỷ quyền để có thể đăng trên 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. Mã thông báo này sẽ được lưu trữ trong cấu hình Travis.

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

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

Điều cuối cùng bạn cần để bắt đầu quy trình tích hợp liên tục là một tệp .travis.yml. Tệp này cho Travis CI biết phải làm gì. Để 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 đã thiết lập xong và bundlesize sẽ cảnh báo bạn nếu JavaScript của bạn vượt quá ngân sách. Ngay cả khi bạn bắt đầu với một ứng dụng có kích thước nhỏ, theo thời gian, khi bạn thêm các tính năng mới, số kilobyte có thể tăng lên. Với tính năng giám sát ngân sách hiệu suất tự động, bạn có thể yên tâm vì biết rằng ngân sách sẽ không bị bỏ qua.

Dùng thử

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

Để xem ứng dụng có đáp ứng được ngân sách hiệu suất hay không, 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 của kho lưu trữ dưới dạng 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 kéo mới bằng cách nhấp vào nút Yêu cầu kéo mới trên trang chủ của kho lưu trữ.

Giờ đây, bạn sẽ thấy các quy trình kiểm tra trạng thái đang diễn ra trên trang yêu cầu kéo.

Quá trình kiểm tra sẽ không mất nhiều thời gian. Rất tiếc, ứng dụng bình chọn mèo này hơi nặng 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 có kích thước 266 KB và ngân sách là 170 KB.

Tối ưu hoá

May mắn là 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ó 2 thành phần 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 ứng dụng đang nhập toàn bộ gói firebase bao gồm nhiều thứ hơn chỉ là cơ sở dữ liệu (xác thực, bộ nhớ, nhắn tin, 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 từ Tools (Công cụ) > Git, Import, and Export (Git, Nhập và Xuất) > Export to GitHub (Xuất sang GitHub).

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

Thành công! Kích thước mới của gói là 125,5 KB và gói này đã 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 moment một cách dễ dàng, nhưng bạn nên thử. Hãy xem cách bạn có thể tối ưu hoá thêm ứng dụng trong Lớp học lập trình về cách xoá mã không dùng đến.

Giám Sát

Ứng dụng hiện đang 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.