Đặ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 bạn đã nhập và đóng gói chúng thành một hoặc nhiều tệp đầu ra, còn được gọi là gói. Việc đóng gói rất gọn gàng, nhưng khi ứng dụng của bạn 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 kích thước gói không tăng quá lớn và ảnh hưởng đến thời gian tải ứng dụng. Webpack hỗ trợ việc thiết lập 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 ví dụ thực tế, đây là một ứng dụng đếm số ngày còn lại cho đến năm mới. Thư viện này được tạo bằng React và moment.js. (Giống như các ứng dụng trong thế giới thực ngày càng phụ thuộc vào các khung và thư viện. 😉)

Một ứng dụng đếm số ngày còn lại cho đến ngày đầu năm mới

Đo lường

Lớp học lập trình này đã chứa ứng dụng đi kèm với webpack.

  1. Nhấp vào Trộn để 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 (Thiết bị đầu cuối) không xuất hiện, bạn có thể cần sử dụng lựa chọn Fullscreen (Toàn màn hình)).
  3. Để xem danh sách tài sản và kích thước của tài sản được mã hoá bằng màu, 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).

Đầu ra Webpack cho thấy kích thước gói là 323 KiB
Webpack cảnh báo bạn về gói JS có kích thước lớn ⚠️

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

Cảnh báo Webpack rằng thành phần vượt quá giới hạn kích thước được đề xuất
Webpack cảnh báo bạn về gói JS có kích thước lớn ⚠️

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 các gói của bạn. Bạn có thể tìm hiểu thêm về các kỹ thuật được đề xuất trên trang Web Fundamentals.

Đề xuất tối ưu hoá hiệu suất Webpack
Đề xuất tối ưu hoá hiệu suất Webpack 💁

Đặ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. Bạn nên tự tìm hiểu. Một nguyên 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/giảm thiểu.

Đối với bản minh hoạ đơn giản này, hãy thử 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 theo byte:

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

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

Các giá trị có thể có cho hints 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 được thông qua. 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 phát hành công khai.
  3. false: Không có cảnh báo hoặc lỗi nào xuất hiện.
Lỗi hiệu suất Webpack bằng phông chữ màu đỏ
"Lỗi" gợi ý về hiệu suất Webpack 🚨

Tối ưu hoá

Mục đích của ngân sách hiệu suất là cảnh báo 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 một ứ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. 🤓)

Các 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 ứng dụng được tạo, mà chỉ quan tâm đến việc ứng dụng có hoạt động được hay không và có nhanh hay không. Nếu bạn nhận thấy mình đang vượt quá ngân sách hiệu suất, thì đã đến lúc bạn cần nghĩ đến các phương án tối ưu hoá có thể.

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

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 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 quy trình này và đây là cách nhanh chóng để viết lại mã đếm ngược mà không cần 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 thực hiện một số phép tính, nhưng bạn có thể triển khai cùng một quy trình đếm ngược bằng JavaScript thuần tuý:

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 webpack trong bảng điều khiển một lần nữa để tạo gói được tối ưu hoá.

Ta-da! Bạn đã giảm 223 KiB (230 KB) và ứng dụng nằm trong hạn mức.🎉

Đầu ra kích thước gói Webpack sau khi tối ưu hoá là 97,7 KiB

Giám Sát

Bạn chỉ cần thêm một vài dòng mã để thiết lập ngân sách hiệu suất trong webpack và webpack 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. Có câu nói "xa mặt cách lòng", nhưng webpack có thể đảm bảo rằng bạn luôn nhận thức được những tác động đến hiệu suất.