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 mức thiết lập tối thiểu và áp dụng chúng trong quy trình phát triển. Travis CI là một dịch vụ chạy các hoạt động 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 đã vượt qua các bài kiểm thử kích thước gói.
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 main và một cảnh báo trong trường hợp kích thước tăng đột biến.
Để xem ví dụ này trong thực tế, dưới đây là một ứng dụng đi kèm với webpack cho phép bạn bỏ phiếu cho chú mèo bạn yêu thích.
Đặt ngân sách hiệu suất
Sự cố nhỏ này đã chứa Bundlesize.
- Nhấp vào Remix để chỉnh sửa (Remix) để 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 tra kích thước của tệp, hãy thêm phần sau vào tệp package.json:
"bundlesize": [
{
"path": "./public/*.bundle.js",
"maxSize": "170 kB"
}
]
Để giữ cho 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ợ các mẫu toàn cầu và ký tự * đại diện * trong đường dẫn tệp sẽ khớp với tất cả cá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 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 động kho lưu trữ đó bằng README.md.
Bạn cần đăng ký một 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ơ, 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 liệt kê trên Travis.
Cho phép Bundlesize đăng theo yêu cầu lấy dữ liệu
Bundlesize cần được uỷ quyền để có thể đăng theo các yêu cầu lấy dữ liệu. Vì vậy, hãy truy cập vào đường liên kết này để lấy mã thông báo kích thước gói 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 để khởi động quá trình tích hợp liên tục là tệp .travis.yml. Tệp này sẽ 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 đã 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 một cách hiệu quả thì theo thời gian, khi bạn thêm tính năng mới, số kilobyte truyền có thể tăng dần theo thời gian. Với tính năng giám sát ngân sách hiệu suất tự động, bạn có thể an tâm rằng thông tin 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 cách ứng dụng xếp chồ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.
Trên Glitch, hãy nhấp vào Tools > Git, Import and Export > Export to GitHub (Công cụ, nhập và xuất).
Trong cửa sổ bật lên, hãy nhập tên người dùng GitHub của bạn và tên của kho lưu trữ là
username/repo. Tính năng trục trặc sẽ xuất ứng dụng của bạn sang một nhánh mới có tên là "glitch".Tạo một yêu cầu lấy dữ liệu mới bằng cách nhấp vào nút New kéo 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.
Sẽ không mất nhiều thời gian cho đến khi tất cả bước kiểm tra hoàn tất. Thật không may, ứng dụng bầu cử cho mèo hơi lớn 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 thay, có một số chiến thắng dễ dàng về hiệu suất mà bạn có thể thực hiện bằng cách xoá các mã không sử dụng. 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 dùng Cơ sở dữ liệu theo thời gian thực Firebase để lưu trữ dữ liệu, nhưng ứng dụng còn nhập toàn bộ gói firebase, trong đó không chỉ có cơ sở dữ liệu (xác thực, lưu trữ, nhắn tin, v.v.).
Hãy khắc phục lỗi này bằng cách chỉ nhập gói mà ứng dụng cần vào 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.
Nhấp vào nút Công cụ.
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.
Trong bảng điều khiển, hãy nhập
webpackrồi đợi thuộc tính này hoàn tất quá trình tạo bản dựng.Xuất mã sang GitHub từ Tools > Git, Import and Export > Export to GitHub.
Truy cập vào trang yêu cầu lấy dữ liệu trên GitHub rồi đợ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à tất cả các bước kiểm tra đã thành công. 🎉
Không giống như Firebase, bạn không thể dễ dàng nhập các phần của thư viện khoảnh khắc, nhưng sẽ rất đáng thử. Hãy xem cách 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.
Theo dõi
Ứng dụng này hiện không vượt quá ngân sách của bạn 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 hoạt động nhanh.