Trang này được dịch bởi Cloud Translation API.

Theo dõi và phân tích ứng dụng

Công cụ nào để theo dõi và phân tích gói webpack

Ivan Akulov

Ngay cả khi bạn định cấu hình webpack để làm cho ứng dụng nhỏ nhất có thể, bạn vẫn cần theo dõi và biết ứng dụng đó bao gồm những gì. Nếu không, bạn có thể cài đặt một phần phụ thuộc giúp ứng dụng lớn gấp đôi – và bạn thậm chí sẽ không nhận thấy phần phụ thuộc đó!

Phần này mô tả các công cụ giúp bạn hiểu rõ về gói của mình.

Theo dõi kích thước gói

Để theo dõi kích thước ứng dụng của bạn, hãy sử dụng webpack-dashboard trong quá trình phát triển và bundlesize trên CI.

webpack-dashboard

webpack-dashboard cải thiện đầu ra gói web với kích thước của các phần phụ thuộc, tiến trình và các thông tin chi tiết khác. Dưới đây là ví dụ:

Trang tổng quan này giúp theo dõi các phần phụ thuộc lớn – nếu thêm một phần phụ thuộc, bạn sẽ thấy phần phụ thuộc đó ngay trong phần Mô-đun!

Để bật tính năng này, hãy cài đặt gói webpack-dashboard:

npm install webpack-dashboard --save-dev

Và thêm trình bổ trợ này vào phần plugins của cấu hình:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

hoặc sử dụng compiler.apply() nếu bạn đang sử dụng máy chủ phát triển dựa trên Express:

compiler.apply(new DashboardPlugin());

Hãy thoải mái sử dụng trang tổng quan để tìm những điểm có thể cải thiện! Ví dụ: cuộn qua phần Mô-đun để tìm những thư viện quá lớn và có thể được thay thế bằng các thư viện thay thế nhỏ hơn.

bundlesize

bundlesize xác minh rằng các tài sản webpack không vượt quá kích thước đã chỉ định. Tích hợp ứng dụng với CI để nhận thông báo khi ứng dụng trở nên quá lớn:

Cách định cấu hình:

Tìm hiểu kích thước tối đa

Hãy tối ưu hoá ứng dụng sao cho kích thước nhỏ nhất có thể. Chạy bản dựng chính thức.

Thêm phần bundlesize vào package.json với nội dung sau:

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*"
    }
  ]
}

Thực thi bundlesize bằng npx:

npx bundlesize

Thao tác này sẽ in kích thước nén của mỗi tệp:

PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB

Thêm 10-20% vào mỗi kích thước để có kích thước tối đa. Khoảng chênh lệch 10-20% này cho phép bạn phát triển ứng dụng như bình thường, đồng thời cảnh báo bạn khi kích thước ứng dụng tăng quá nhiều.

Bật bundlesize
Cài đặt gói bundlesize dưới dạng phần phụ thuộc phát triển:
```
npm install bundlesize --save-dev
```

Trong phần bundlesize trong package.json, hãy chỉ định kích thước tối đa của bê tông. Đối với một số tệp (ví dụ: hình ảnh), bạn nên chỉ định kích thước tối đa cho mỗi loại tệp, chứ không phải cho mỗi tệp:

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*.png",
      "maxSize": "16 kB",
    },
    {
      "path": "./dist/main.*.js",
      "maxSize": "20 kB",
    },
    {
      "path": "./dist/vendor.*.js",
      "maxSize": "35 kB",
    }
  ]
}

Thêm tập lệnh npm để chạy quy trình kiểm tra:

// package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

Định cấu hình CI để thực thi npm run check-size trên mỗi lần đẩy. (Và tích hợp bundlesize với GitHub nếu bạn đang phát triển dự án trên đó.)

Vậy là xong! Bây giờ, nếu chạy npm run check-size hoặc đẩy mã, bạn sẽ thấy liệu các tệp đầu ra có đủ nhỏ hay không:

Ảnh chụp màn hình kết quả kích thước gói. Tất cả kết quả bản dựng đều được đánh dấu là "Đạt"

Hoặc, trong trường hợp không thành công:

Ảnh chụp màn hình kết quả của bundlesize. Một số kết quả bản dựng được đánh dấu là "Không đạt"

Tài liệu đọc thêm

Alex Russell về thời gian tải thực tế mà chúng ta nên nhắm đến

Phân tích lý do gói này quá lớn

Bạn nên tìm hiểu sâu hơn về gói này để xem những mô-đun nào chiếm không gian trong gói. Giới thiệu về webpack-bundle-analyzer:

(Bản ghi màn hình từ github.com/webpack-contrib/webpack-bundle-analyzer)

webpack-bundle-analyzer quét gói và tạo hình ảnh trực quan về nội dung bên trong gói. Hãy sử dụng hình ảnh trực quan này để tìm các phần phụ thuộc lớn hoặc không cần thiết.

Để sử dụng trình phân tích, hãy cài đặt gói webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

thêm trình bổ trợ vào cấu hình webpack:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

và chạy bản dựng chính thức. Trình bổ trợ sẽ mở trang số liệu thống kê trong trình duyệt.

Theo mặc định, trang số liệu thống kê cho biết kích thước của các tệp đã phân tích cú pháp (tức là kích thước của các tệp xuất hiện trong gói). Bạn có thể muốn so sánh kích thước gzip vì kích thước này gần với kích thước mà người dùng thực tế trải nghiệm; hãy sử dụng thanh bên ở bên trái để chuyển đổi kích thước.

Dưới đây là những điều cần lưu ý trong báo cáo:

Các phần phụ thuộc lớn. Tại sao các tệp này lại lớn như vậy? Có lựa chọn nào nhỏ hơn không (ví dụ: Preact thay vì React)? Bạn có sử dụng tất cả mã trong đó không (ví dụ: Moment.js bao gồm nhiều ngôn ngữ thường không được sử dụng và có thể bị loại bỏ)?
Phần phụ thuộc trùng lặp. Bạn có thấy cùng một thư viện lặp lại trong nhiều tệp không? (Ví dụ: sử dụng tuỳ chọn optimization.splitChunks.chunks – trong webpack 4 – hoặc CommonsChunkPlugin – trong webpack 3 – để di chuyển tệp đó vào một tệp chung.) Hay gói có nhiều phiên bản của cùng một thư viện?
Các phần phụ thuộc tương tự. Có thư viện tương tự nào thực hiện công việc gần giống không? (Ví dụ: moment và date-fns, hoặc lodash và lodash-es.) Hãy thử sử dụng một công cụ duy nhất.

Ngoài ra, hãy xem bài phân tích tuyệt vời của Sean Larkin về các gói webpack.

Tóm tắt

Sử dụng webpack-dashboard và bundlesize để luôn nắm bắt kích thước của ứng dụng
Tìm hiểu những yếu tố tạo nên kích thước bằng webpack-bundle-analyzer