Đặt ngân sách hiệu suất bằng gói web

Milica Mihajlija

Webpack kết hợp tất cả các tệp đã nhập và đóng gói chúng thành một hoặc nhiều tệp đầu ra được gọi là gói. Việc đóng gói rất gọn gàng, nhưng khi ứng dụng phát triển, các gói của bạn cũng sẽ phát triển. Bạn cần theo dõi kích thước gói để đảm bảo rằng các gói đó không phát triển quá lớn và ảnh hưởng đến thời gian tải ứng dụng. Webpack hỗ trợ việc đặt ngân sách hiệu suất dựa trên kích thước tài sản và có thể theo dõi kích thước gói cho bạn.

Để xem cách hoạt động, sau đây là một ứng dụng đếm số ngày còn lại cho đến năm mới. Ứng dụng này được tạo bằng React và moment.js. (Giống như các ứng dụng thực tế ngày càng phụ thuộc vào khung và thư viện. 😉)

Đo

Lớp học lập trình này đã chứa ứng dụng được đóng gói bằng webpack.

1. Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
2. Nhấp vào Terminal (Thiết bị đầu cuối) (lưu ý: nếu nút Terminal không xuất hiện, bạn có thể cần sử dụng tuỳ chọn Toàn màn hình).
3. Để xem danh sách các thành phần và kích thước của các thành phần đó được mã hoá bằng màu sắc, hãy nhập webpack vào bảng điều khiển.

webpack

Gói chính được đánh dấu bằng màu vàng vì lớn hơn 244 KiB (250 KB).

Theo mặc định, các cảnh báo này được bật ở chế độ phát hành công khai và ngưỡng mặc định là 244 KiB chưa nén, cho cả thành phần và điểm truy cập (kết hợp tất cả thành phần được sử dụng trong lần tải đầu tiên của trang).

Webpack không chỉ cảnh báo bạn mà còn đưa ra đề xuất về cách giảm kích thước gói. Bạn có thể tìm hiểu thêm về các kỹ thuật được đề xuất trong phần Kiến thức cơ bản về web.

Đặt ngân sách hiệu suất tuỳ chỉnh

Ngân sách hiệu suất phù hợp sẽ phụ thuộc vào bản chất của dự án. Tốt nhất là bạn nên tự tìm hiểu. Nguyên tắc chung là phân phối tài nguyên đường dẫn quan trọng đã nén/rút gọn dưới 170 KB.

Đối với bản minh hoạ đơn giản này, hãy cố gắng tiết kiệm hơn nữa và đặt ngân sách thành 100 KB (97,7 KiB). Trong webpack.config.js, hãy thêm nội dung sau:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

Ngân sách hiệu suất mới được đặt bằng byte:

• 100.000 byte cho từng thành phần (maxAssetSize)
• 100000 byte cho điểm truy cập (maxEntrypointSize)

Trong trường hợp này, chỉ có một gói cũng đóng vai trò là điểm truy cập.

Các giá trị có thể có cho gợi ý là:

1. warning (mặc định): Hiển thị thông báo cảnh báo màu vàng, nhưng bản dựng vẫn vượt qua. Tốt nhất là bạn nên sử dụng tính năng này trong môi trường phát triển.
2. error: Hiển thị thông báo lỗi màu đỏ, nhưng bản dựng vẫn vượt qua. Bạn nên sử dụng chế độ cài đặt này cho các bản dựng chính thức.
3. false: Không có cảnh báo hoặc lỗi nào xuất hiện.

Tối ưu hoá

Mục đích của ngân sách hiệu suất là cảnh báo cho bạn về các vấn đề về hiệu suất trước khi chúng trở nên quá khó để khắc phục. Luôn có nhiều cách để tạo ứng dụng và một số kỹ thuật sẽ giúp thời gian tải nhanh hơn. (Rất nhiều trong số đó được ghi lại ngay tại đây trong phần Tối ưu hoá JavaScript. 🤓)

Khung và thư viện giúp nhà phát triển dễ dàng hơn, nhưng người dùng cuối không thực sự quan tâm đến cách xây dựng ứng dụng, chỉ cần ứng dụng đó có chức năng và nhanh chóng. Nếu bạn nhận thấy mình đã vượt quá ngân sách hiệu suất, đã đến lúc cân nhắc các phương án tối ưu hoá có thể áp dụng.

Trong thực tế, các khung phía máy khách lớn thường khó hoán đổi, vì vậy, bạn cần sử dụng các khung này một cách khôn ngoan. Chỉ cần nghiên cứu một chút, bạn thường có thể tìm thấy các giải pháp thay thế nhỏ hơn cho các thư viện phổ biến cũng thực hiện được công việc này (date-fns là một giải pháp thay thế hiệu quả cho moment.js). Đôi khi, bạn không nên sử dụng khung hoặc thư viện nếu khung hoặc thư viện đó ảnh hưởng đáng kể đến hiệu suất.

Việc xoá mã không dùng đến là một cách hay để tối ưu hoá các ứng dụng có chứa thư viện lớn của bên thứ ba. Hướng dẫn xoá mã không dùng đến giải thích chi tiết quy trình này và sau đây là cách nhanh chóng để viết lại mã đếm ngược mà không cần sử dụng moment.js.

Trong app/components/Countdown.jsx, hãy xoá:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

Và xoá dòng này:

const moment = require('moment');

Bạn cần phải biết một chút về toán học, nhưng bạn có thể triển khai cùng một tính năng đếm ngược bằng JavaScript cơ bản:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

Bây giờ, hãy xoá moment.js khỏi package.json và chạy lại webpack trong bảng điều khiển để tạo gói được tối ưu hoá.

Tuyệt vời! Bạn đã giảm được 223 KiB (230 KB) và ứng dụng đã nằm trong ngân sách.🎉

Giám Sát

Việc thiết lập ngân sách hiệu suất trong webpack chỉ mất vài dòng mã và sẽ cảnh báo bạn nếu bạn (vô tình) thêm một phần phụ thuộc lớn. Có câu nói "mất tích thì mất tâm", nhưng webpack có thể đảm bảo rằng bạn luôn nhận biết được những tác động đến hiệu suất.