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

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

Những công cụ bạn nên sử dụng để 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.

webpack-dashboard

webpack-dashboard nâng cao đầu ra gói web cho biết 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à cách hiển thị:

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ẽ ngay lập tức thấy phần Modules (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ủ nhà 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 các vị trí có thể cải thiện! Ví dụ: cuộn qua phần Modules (Mô-đun) để xem thư viện nào quá lớn và có thể thay thế được bằng các giải pháp 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 ứng dụng với 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ông cụ CI, có kết quả Bundlesize

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 bằng đoạn mã sau nội dung:

// 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 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 cụ thể kích thước tối đa. Đố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ó đang đủ nhỏ:

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

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

Ảnh chụp màn hình kết quả kích thước gói. Xây dựng một số
kết quả được đánh dấu '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 mục tiêu

Phân tích lý do tại sao gói lại lớn đến vậy

Bạn nên tìm hiểu kỹ hơn về gói để xem những mô-đun nào chiếm không gian trong gói. Họp webpack-bundle-analyzer:

(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 bản thảo này trực quan hoá dữ liệu để 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 thấy kích thước của những tệp đã phân tích cú pháp (tức là các tệp đang hiển thị) 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 kinh nghiệm; 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 chúng 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 rất nhiều ngôn ngữ thường không được sử dụng và có thể bị bỏ rơi) không?
Các phần phụ thuộc bị 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 không?
Các phần phụ thuộc tương tự. Có cá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 phân tích tuyệt vời về webpack của Carlos Larkin gói.

Tổng hợp

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 xem yếu tố nào tạo nên kích thước nhờ webpack-bundle-analyzer