Bạn muốn làm cho trang web Angular của mình có tốc độ nhanh và khả năng truy cập nhanh nhất có thể? Bạn đã đến đúng nơi rồi!
Angular là gì?
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 thành phần để giúp bạn nhanh chóng thiết lập một ứng dụng dễ bảo trì và có thể mở rộng. Angular cho phép các nhà phát triển tạo ra các ứng dụng hoạt động trên web, thiết bị di động hoặc máy tính để bàn.
Bộ sưu tập này có gì?
Bộ sưu tập này tập trung vào 5 lĩnh vực 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 độ tin cậy của ứng dụng trên các mạng kém hiệu quả bằng cách lưu trước các tài sản thông qua trình chạy dịch vụ Angular
- Giúp các công cụ tìm kiếm và bot mạng xã hội dễ dàng tìm thấy ứng dụng của bạn 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ủ
- Làm cho ứng dụng của bạn có thể cài đặt để cung cấp trải nghiệm người dùng tương tự như trải nghiệm của ứng dụng iOS/Android
- Cải thiện khả năng truy cập của ứng dụng để ứng dụng trở nên hữu ích và dễ hiểu đối với mọi người dùng
Mỗi bài đăng trong bộ sưu tập 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 nào không có trong bộ sưu tập này?
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 cảm thấy tự tin với những phương pháp 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 thiết lập nhanh một ứng dụng Angular phía máy khách đơn giản. Bài đăng này giới thiệu ngắn gọn về CLI, trong khi các bài đăng khác trong bộ sưu tập này hướng dẫn 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 cầu 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 CLI 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 và cấu trúc thư mục ban đầu 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 quá trình thiết lập hoàn tất thành công, hãy khởi động ứng dụng của bạn bằng cách chạy:
cd my-app
ng serve
Bây giờ, 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, khả năng tiếp cận và khả năng SEO của ứng dụng Angular. Sau đây là nội dung được đề cập:
- Phân tách mã cấp định tuyến trong Angular
- Ngân sách hiệu suất bằng CLI Angular
- Định tuyến chiến lược tìm nạp trước trong Angular
- Tối ưu hoá khả năng phát hiện thay đổi trong Angular
- Ảo hoá danh sách lớn bằng Angular CDK
- Lưu trước vào bộ nhớ đệm bằng Angular Service Worker
- Kết xuất trước các tuyến bằng CLI Angular
- Hiển thị phía máy chủ bằng Angular Universal
- Thêm tệp kê khai ứng dụng web bằng CLI Angular
- Kiểm tra khả năng hỗ trợ tiếp cận bằng trình phân tích mã