Góc độ: Phân tích hiệu suất với Trình phân tích gói webpack
Hiệu suất web có thể là một trong những phần quan trọng nhất cần tính đến đối với một ứng dụng web hiện đại. Vấn đề là, việc thêm các module và công cụ của bên thứ ba vào các dự án của ta dễ dàng hơn bao giờ hết, nhưng điều này có thể đi kèm với sự đánh đổi hiệu suất rất lớn.
Điều này càng trở nên khó khăn hơn khi dự án trở nên lớn hơn, do đó, bài viết này xem xét cách sử dụng Trình phân tích gói webpack với Angular để giúp hình dung mã trong gói cuối cùng đến từ đâu.
Dự án mới và thêm phụ thuộc
Để cài đặt một cơ sở chung, ta sẽ tạo một ứng dụng Angular hoàn toàn mới và thêm một số phụ thuộc:
# Install the Angular CLI globally $ npm i @angular/cli -g # Create a new Angular project of your choosen name && change directory $ ng new AngularBundleAnalyser > N > SCSS $ cd AngularBundleAnalyser $ npm i moment $ npm i firebase # Open this up in VS Code $ code . && ng serve Sau đó, ta có thể truy app.component.ts và nhập chúng vào gói main.js của ta :
import { Component, OnInit } from '@angular/core'; import * as moment from 'moment'; import * as firebase * from 'firebase'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { ngOnInit(): void { const time = moment.utc(); const firebaseConfig = {}; firebase.initializeApp(firebaseConfig); } } Gói của ta đã tăng từ khoảng 9kB lên 24kB. Ta nên phân tích điều này để xem ta có thể làm gì để con số này thấp hơn. Hãy cài đặt plugin webpack-bundle-analyzer :
$ npm i webpack-bundle-analyzer -D Xây dựng với stats.json
Angular CLI cung cấp cho ta khả năng xây dựng với một stats.json ngay lập tức. Điều này cho phép ta chuyển nó đến trình phân tích gói của ta và bắt đầu quá trình.
Ta có thể thêm một tập lệnh mới vào package.json để thêm chức năng này:
"scripts": { "build:stats": "ng build --stats-json" } Bây giờ ta có thể chạy npm run build:stats để tạo file stats.json bên trong folder dist ! Hãy làm điều đó:
$ npm run build:stats Phân tích gói
Ta có thể tạo một script khác chạy webpack-bundle-analyzer stats.json webpack-bundle-analyzer với stats.json :
"scripts": { "analyze": "webpack-bundle-analyzer dist/AngularBundleAnalyser/stats.json" } Chạy trình phân tích bằng lệnh sau:
$ npm run analyze Sau đó, bạn có thể xem phân tích của bạn tại localhost:8888 :
Webpack Bundle Analyzer is started at http://127.0.0.1:8888 Use Ctrl+C to close it 
Ồ ồ. Điều này cho ta biết rằng ta nên làm tốt hơn việc loại bỏ các mục không sử dụng trong gói của ta . Hãy xem ví dụ này bằng cách chỉ nhập initializeApp từ firebase :
import { Component, OnInit } from '@angular/core'; import * as moment from 'moment' import { initializeApp } from 'firebase/app' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { ngOnInit(): void { const time = moment.utc(); const firebaseConfig = {}; initializeApp(firebaseConfig); } } Điều này tạo ra sự khác biệt sau trong phân tích gói của ta :
Tóm lược
Trở thành một người với group của bạn. Hiểu những gì bạn có thể làm để làm cho nó nhỏ hơn và tối ưu hóa hơn nữa. Công cụ webpack-bundle-analyzer là hoàn hảo cho việc này!
Các tin liên quan
