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 gói web để làm cho ứng dụng nhỏ nhất có thể, bạn vẫn cần phải giữ theo dõi email và biết nó 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à thậm chí bạn sẽ không nhận thấy điều đó!

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, hãy sử dụng webpack-dashboard trong quá trình phát triển và bundlesize trên CI.

trang tổng quan gói web

webpack-dashboard cải thiện đầu ra webpack bằng 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ụ:

Ảnh chụp màn hình kết quả của webpack-dashboard

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());

Vui lòng dùng thử trang tổng quan để tìm các vị trí 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.

kích thước gói

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

Ảnh chụp màn hình phần CI của một yêu cầu lấy dữ liệu trên GitHub. Trong số các công cụ CI, có đầu ra Bundlesize

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

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

Tối ưu hoá ứng dụng để ứng dụng 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 từng 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, bạn sẽ nhận được kích thước tối đa. Biên lợi nhuận 10-20% này sẽ cho phép bạn hãy 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 của ứng dụng tăng quá nhiều.

Bật bundlesize
Cài đặt gói bundlesize làm phần phụ thuộc phát triển:
```
npm install bundlesize --save-dev
```
Trong phần bundlesize của 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 có thể muốn chỉ định kích thước tối đa cho mỗ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ả của bundlesize. 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 đó. Họp 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. 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 một 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ợ này 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 nên so sánh các kích thước gzip vì đó là kích thước gần với kích thước của người dùng thực experience; hãy sử dụng thanh bên ở bên trái để chuyển đổi các 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ụ: Xác định trước thay vì Phản ứng) không? 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ụ: tuỳ chọn optimization.splitChunks.chunks – trong webpack 4 – hoặc CommonsChunkPlugin – trong webpack 3 – để di chuyển nó 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 gần như cùng một công việc 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ổng hợp

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