Sử dụng Trình phân tích gói webpack hoặc source-map-explorer để phân tích kích thước gói ứng dụng Angular
Một trong những yếu tố quan trọng nhất để cải thiện hiệu suất tải của ứng dụng web là kích thước gói của nó. Rất may, các gói module hiện đại như webpack thực hiện công việc thực sự tốt trong việc loại bỏ mã chết thông qua rung cây. Tuy nhiên, rất có thể trong một ứng dụng lớn hơn, một số dữ liệu nhập không cần thiết sẽ không bị rung cây đúng cách và mã không cần thiết sẽ được đóng gói với ứng dụng. Hoặc có lẽ bạn sẽ phát hiện ra rằng một số module nhất định không được tải đúng cách và vẫn được đưa vào gói chính.
Sau đây, ta sẽ xem xét cách sử dụng hai công cụ để dễ dàng phân tích kích thước gói ứng dụng của bạn: trình phân tích gói webpack và trình khám phá bản đồ nguồn .
trình phân tích gói webpack
trình phân tích gói webpack là một công cụ phân tích file JSON thống kê webpack mà Angular CLI có thể tạo tự động khi xây dựng ứng dụng.
Trước tiên, bạn cần cài đặt webpack-pack-analyzer trong dự án của bạn dưới dạng phụ thuộc của nhà phát triển:
$ npm i webpack-bundle-analyzer --save-dev # or, using Yarn: $ yarn add webpack-bundle-analyzer --dev Sau đó, chỉ cần xây dựng ứng dụng của bạn để production bằng Angular CLI và chỉ định --stats-json để dữ liệu thống kê webpack cũng được xuất trong folder dist:
$ ng build --prod --stats-json Bây giờ, tất cả những gì còn lại cần làm là chạy webpack- stats.json -analyzer local dựa trên file stats.json bằng cách sử dụng npx :
$ npx webpack-bundle-analyzer dist/stats.json Thao tác này sẽ khởi động server local trên cổng 8888 với bản đồ FoamTree tương tác của gói ứng dụng production của bạn. Ví dụ đây là bản đồ gói đã tạo của ứng dụng mẫu Angular 5 này :
Từ menu phụ, bạn có thể chọn các gói để hiển thị (ví dụ: chính, nhà cung cấp, group …)
Để làm cho mọi thứ dễ dàng hơn, bạn có thể thêm một tập lệnh npm mới gọi webpack-pack-analyzer :
"scripts": { "stats": "webpack-bundle-analyzer dist/stats.json", ... }, Và bây giờ, khi nào bạn muốn truy cập số liệu thống kê trên bản dựng production , bạn có thể chỉ cần chạy:
$ npm run stats Các tập lệnh npm nhìn đầu tiên trong folder node_modules local , vì vậy không cần sử dụng npx ở đây.
source-map-explorer
source-map-explorer là một công cụ sử dụng các file bản đồ nguồn được tạo của một gói để phân tích kích thước và thành phần của gói và hiển thị hình ảnh về gói tương tự như những gì trình phân tích gói webpack thực hiện.
Để bắt đầu, trước tiên hãy cài đặt gói trong dự án của bạn dưới dạng phụ thuộc nhà phát triển:
$ npm i source-map-explorer --save-dev # or, using Yarn: $ yarn add source-map-explorer --dev Sau đó, bạn cần xây dựng ứng dụng của bạn để production và sử dụng cờ --sourceMap để các file bản đồ nguồn được tạo cho từng gói JavaScript:
$ ng build --prod --sourceMap Sau đó, bạn có thể tạo và chạy trực quan hóa bằng cách trỏ vào một trong các file JavaScript từ gói của bạn. Ví dụ: nếu ta có thể xem xét gói chính, nó sẽ trông giống như thế này (hàm băm sẽ khác nhau):
$ npx source-map-explorer dist/main.f3be1bf742c2a16b21d5.bundle.js Và đây là một ví dụ về những gì ta nhận được trong trình duyệt:
📊 Đến đây bạn đã biết cách sử dụng các công cụ này, bạn có thể bắt đầu thú vị khi làm cho ứng dụng của bạn gọn gàng hơn và tải càng nhiều mã càng tốt.
Các tin liên quan
