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

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

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

Phần này mô tả các công cụ giúp bạn hiểu 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 trang tổng quan gói web trong quá trình phát triển và kích thước gói trên CI.

trang tổng quan gói web

webpack-dashboard cải thiện đầu ra của gói web nhờ 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à giao diện của trang này:

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 ngay phần phụ thuộc đó trong phần Mô-đun!

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

npm install webpack-dashboard --save-dev

Và thêm trình bổ trợ 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 sử dụng máy chủ dành cho nhà phát triển dựa trên Express:

compiler.apply(new DashboardPlugin());

Hãy dùng trang tổng quan này để tìm những chỗ có thể cải thiện! Ví dụ: di chuyển qua phần Modules (Mô-đun) để tìm những thư viện quá lớn và có thể thay thế 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 webpack không vượt quá kích thước đã chỉ định. Hãy tích hợp giải pháp này với một CI để nhận thông báo khi ứng dụng có kích thước quá lớn:

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

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

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

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

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

3. 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
   

4. Thêm 10-20% cho mỗi kích thước để nhận được kích thước tối đa. Mức lợi nhuận 10-20% này sẽ 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

5. Cài đặt gói bundlesize dưới dạng phần phụ thuộc cho quá trình phát triển:

   npm install bundlesize --save-dev
   

6. Trong phần bundlesize trong package.json, hãy chỉ định kích thước tối đa cụ thể. Đố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",
       }
     ]
   }   
   

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

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

8. Định cấu hình CI để thực thi npm run check-size cho 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 đó.)

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

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

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 lớn đến vậy

Bạn có thể muốn tìm hiểu sâu hơn về gói để xem mô-đun nào chiếm không gian trong gói đó. Hãy tìm hiểu về webpack-bundle-analyzer:

webpack-bundle-analyzer quét gói và xây dựng hình ảnh trực quan về nội dung bên trong. 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 gói web:

// 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 thống kê cho thấy kích thước của các tệp được phân tích cú pháp (tức là của các tệp khi chúng 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 đó gần với trải nghiệm thực tế của người dùng hơn; hãy sử dụng thanh bên ở bên trái để chuyển đổi kích thước.

Sau đây là những nội dung bạn cần xem xét trong báo cáo:

• Phần phụ thuộc lớn. Tại sao chúng lớn như vậy? Có ứng dụng thay thế nhỏ hơn không (ví dụ: Hành động thay vì phản ứng)? Bạn có sử dụng tất cả mã trong đó không (ví dụ: Moment.js có nhiều ngôn ngữ thường không được sử dụng và có thể bị bỏ qua)?
• Các 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? (Sử dụng, ví dụ: tuỳ chọn optimization.splitChunks.chunks trong gói web 4 hoặc CommonsChunkPlugin trong gói web 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ó các thư viện tương tự thực hiện công việc gần như nhau không? (Ví dụ: moment và date-fns hoặc lodash và lodash-es.) Hãy cố gắng duy trì một công cụ duy nhất.

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

Tổng hợp

• Sử dụng webpack-dashboard và bundlesize để theo dõi kích thước của ứng dụng
• Tìm hiểu sâu hơn về những yếu tố giúp tăng kích thước bằng webpack-bundle-analyzer