Webpack kết hợp tất cả các tệp đã nhập và đóng gói các tệp đó thành một hoặc nhiều tệp đầu ra được gọi là gói. Việc tạo gói rất dễ dàng, nhưng khi ứng dụng phát triển, các gói cũng sẽ phát triển theo. Bạn cần theo dõi kích thước gói để đảm bảo chúng 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ợ thiết lập ngân sách hiệu suất dựa trên kích thước thành phần và có thể theo dõi kích thước gói cho bạn.
Để xem tính năng này trong thực tế, dưới đây là một ứng dụng đếm số ngày còn lại cho đến Năm mới. Giao diện này được xây dựng 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 đi kèm với webpack.
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy chọn Toàn màn hình).
- Để xem danh sách thành phần được mã hoá màu và kích thước của chúng, hãy nhập
webpackvà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, những 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 không nén, cho cả tài sản và điểm truy cập (là tổ hợp tất cả tài sản dùng trong lượt tải ban đầu của trang).
Webpack không chỉ cảnh báo cho bạn mà còn đưa ra đề xuất về cách giảm kích thước các gói. Bạn có thể tìm hiểu thêm về các kỹ thuật được đề xuất trong trang 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 tính chất của dự án. Tốt nhất là bạn nên tự tìm hiểu. Quy tắc chung là phân phối dưới 170 KB tài nguyên đường dẫn quan trọng được nén/rút gọn.
Đối với bản minh hoạ đơn giản này, hãy cố gắng thận trọng 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 tính bằng byte:
- 100.000 byte đối với từng thành phần (maxAssetSize)
- 100000 byte cho điểm nhậ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.
gợi ý có thể là các giá trị sau:
warning(mặc định): Hiện thông báo cảnh báo màu vàng, nhưng bản dựng sẽ 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.error: Cho thấy thông báo lỗi màu đỏ, nhưng bản dựng vẫn vượt qua quy trình tạo bản dựng. Bạn nên sử dụng chế độ cài đặt này cho các bản dựng chính thức.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 các vấn đề đó 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 nội dung trong số đó được ghi lại ngay tại đây trong phần Tối ưu hoá JavaScript của bạn. 🤓)
Khung và thư viện giúp cuộc sống của nhà phát triển trở nê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 ứng dụng được xây dựng mà chỉ quan tâm rằng chúng phải hoạt động được và hoạt động nhanh chóng. Nếu bạn thấy mình vượt quá ngân sách hiệu suất, hãy nghĩ đến các biện pháp tối ưu hoá có thể có.
Trong thế giới thực, các khung lớn phía máy khách thường khó hoán đổi được. Vì vậy, bạn cần sử dụng các khung này một cách khôn ngoan. Sau khi nghiên cứu một chút, bạn thường có thể tìm thấy các lựa chọn thay thế nhỏ hơn so với các thư viện phổ biến cũng hoạt động tốt (date-fns là một giải pháp thay thế phù hợp cho moment.js). Đôi khi, bạn không nên sử dụng một khung hoặc thư viện nếu các khung hoặc thư viện đó có tác động đáng kể đến hiệu suất.
Việc xoá đoạn mã không dùng đến là một cách hay để tối ưu hoá các ứng dụng có chứa các 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 về quy trình này và sau đây là một cách nhanh chóng để viết lại mã đếm ngược mà không cần sử dụngnh.js.
Trong app/Component/Đếm ngược.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');
Việc này tốn một chút về toán, nhưng bạn có thể triển khai cùng một bộ đếm ngược với JavaScript vanilla:
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 gói web trong bảng điều khiển để tạo gói được tối ưu hoá.
Xin chào! Bạn đã giảm được 223 KiB (230KB) và ứng dụng này vẫn nằm trong ngân sách.🎉
Theo dõi
Việc thiết lập ngân sách hiệu suất trong gói web chỉ cần một vài dòng mã và sẽ cảnh báo cho bạn nếu bạn (vô tình) thêm một phần phụ thuộc lớn. Việc nói xuất hiện là điều mà bạn không nhìn thấy, nhưng gói web có thể đảm bảo rằng bạn luôn ý thức được các hệ quả về hiệu suất.