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 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ể.
Để xem cách hoạt động, sau đây là một ứng dụng đi kèm với webpack cho phép bạn bầu cho chú mèo con mà bạn yêu thích.
Đặt ngân sách hiệu suất
Lỗi này đã chứa bundlesize.
- 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 của tệp này, 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 đề 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 của bạn và khởi chạy 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ơ.
Sau khi bạn 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.
Uỷ quyền cho bundlesize đăng trên các yêu cầu kéo
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.
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 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.
Việc cuối cùng bạn cần làm để bắt đầu tích hợp liên tục là tệp .travis.yml
. Tệp này sẽ cho Travis CI biết cần làm gì. Để đẩy nhanh tiến trình, 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 vượt quá ngân sách. Ngay cả khi bạn bắt đầu tốt, 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 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.
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).
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".Tạo 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 trạng thái kiểm tra đ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 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.
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 ứng dụng này đang nhập toàn bộ gói firebase bao gồm nhiều thành phần hơn là chỉ một 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.
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
webpack
và chờ quá trình tạo bản dựng hoàn tất.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).
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.
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 đều đã vượt qua. 🎉
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 đã 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.