Bắt đầu: tối ưu hoá ứng dụng Angular

Bạn muốn trang web Angular của mình nhanh và dễ truy cập nhất có thể? Bạn đã đến đúng nơi rồi!

Angular là một khung để xây dựng giao diện người dùng. Thư viện này cung cấp các khối xây dựng để giúp bạn nhanh chóng thiết lập một ứng dụng có thể bảo trì và mở rộng quy mô. Angular giúp nhà phát triển tạo các ứng dụng chạy trên web, thiết bị di động hoặc máy tính.

Bộ sưu tập này có gì?

Bộ sưu tập này tập trung vào 5 khía cạnh chính để tối ưu hoá ứng dụng Angular:

  • Cải thiện hiệu suất của ứng dụng để tăng số lượt chuyển đổi và mức độ tương tác của người dùng
  • Cải thiện mức độ tin cậy của ứng dụng trên các mạng chất lượng kém bằng cách lưu trước các thành phần bằng trình chạy dịch vụ Angular
  • Giúp ứng dụng của bạn có thể được tìm thấy đối với công cụ tìm kiếm và bot trên mạng xã hội bằng cách sử dụng tính năng kết xuất trước và kết xuất phía máy chủ
  • Tạo ứng dụng có thể cài đặt để mang lại trải nghiệm người dùng tương tự như ứng dụng iOS/Android

Mỗi bài đăng trong bộ sưu tập này sẽ mô tả các kỹ thuật mà bạn có thể trực tiếp áp dụng cho các ứng dụng của riêng mình.

Nội dung không có trong bộ sưu tập này là gì?

Bộ sưu tập này giả định rằng bạn đã quen thuộc với Angular và TypeScript. Nếu bạn chưa tự tin về các tính năng này, hãy xem tài liệu về TypeScript và hướng dẫn Bắt đầu sử dụng Angular trên angular.io.

Bắt đầu dự án

Giao diện dòng lệnh Angular (CLI) cho phép bạn nhanh chóng thiết lập một ứng dụng Angular đơn giản phía máy khách. Bài đăng này có phần giới thiệu ngắn về CLI, trong khi các bài đăng khác trong bộ sưu tập này cho biết cách thêm các tính năng nâng cao hơn như hỗ trợ triển khai và kết xuất phía máy chủ.

Thiết lập CLI

Để bắt đầu, hãy cài đặt CLI trên toàn hệ thống và xác minh rằng bạn có phiên bản mới nhất bằng cách chạy các lệnh sau:

npm i -g @angular/cli
ng
--version

Đảm bảo lệnh cuối cùng xuất ra phiên bản 8.0.3 trở lên.

Ngoài ra, nếu không muốn cài đặt CLI trên toàn hệ thống, bạn có thể cài đặt cục bộ và chạy bằng lệnh npx:

npm i @angular/cli
npx ng
--version

Tạo dự án

Cách tạo một lần chạy dự án mới:

ng new my-app

Lệnh này sẽ tạo các tệp ban đầu và cấu trúc thư mục cho ứng dụng của bạn, đồng thời cài đặt các mô-đun nút cần thiết.

Sau khi quy trình thiết lập hoàn tất, hãy khởi động ứng dụng bằng cách chạy:

cd my-app
ng serve

Giờ đây, bạn có thể truy cập vào ứng dụng của mình tại http://localhost:4200.

Tiếp theo là gì?

Trong phần còn lại của bộ sưu tập này, bạn sẽ tìm hiểu cách cải thiện hiệu suất và SEO của ứng dụng Angular. Sau đây là nội dung được đề cập:

  • Phân tách mã cấp tuyến trong Angular
  • Ngân sách hiệu suất bằng Angular CLI
  • Chiến lược tìm nạp trước tuyến đường trong Angular
  • Tối ưu hoá tính năng phát hiện thay đổi trong Angular
  • Số hoá danh sách lớn bằng Angular CDK
  • Lưu trước vào bộ nhớ đệm bằng Trình chạy dịch vụ Angular
  • Kết xuất trước các tuyến đường bằng Angular CLI
  • Kết xuất phía máy chủ bằng Angular Universal
  • Thêm tệp kê khai ứng dụng web bằng Angular CLI