เริ่มต้นใช้งาน: เพิ่มประสิทธิภาพแอปพลิเคชัน Angular

หากต้องการทําให้เว็บไซต์ Angular รวดเร็วและเข้าถึงได้ง่ายที่สุด คุณมาถูกที่แล้ว

Angular เป็นเฟรมเวิร์กสำหรับการสร้างอินเทอร์เฟซผู้ใช้ ซึ่งจะจัดเตรียมองค์ประกอบพื้นฐานที่จะช่วยคุณสร้างแอปพลิเคชันที่ดูแลรักษาได้และปรับขนาดได้อย่างรวดเร็ว Angular ช่วยให้นักพัฒนาแอปสามารถสร้างแอปพลิเคชันที่ทำงานบนเว็บ อุปกรณ์เคลื่อนที่ หรือเดสก์ท็อป

มีอะไรอยู่ในคอลเล็กชันนี้

คอลเล็กชันนี้มุ่งเน้นที่ 5 ด้านหลักในการเพิ่มประสิทธิภาพแอปพลิเคชัน Angular ดังนี้

  • ปรับปรุงประสิทธิภาพของแอปพลิเคชันเพื่อเพิ่ม Conversion และการมีส่วนร่วมของผู้ใช้
  • ปรับปรุงความน่าเชื่อถือของแอปพลิเคชันในเครือข่ายที่ไม่ดีด้วยการแคชเนื้อหาล่วงหน้าด้วย Angular Service Worker
  • ทําให้แอปพลิเคชันค้นพบได้สําหรับเครื่องมือค้นหาและบ็อตโซเชียลมีเดียโดยใช้การแสดงผลล่วงหน้าและการแสดงผลฝั่งเซิร์ฟเวอร์
  • ทำให้แอปพลิเคชันติดตั้งได้เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่คล้ายกับแอป iOS/Android

แต่ละโพสต์ในคอลเล็กชันจะอธิบายเทคนิคที่คุณนำไปใช้กับแอปพลิเคชันของคุณเองได้โดยตรง

รายการใดบ้างที่ไม่อยู่ในคอลเล็กชันนี้

คอลเล็กชันนี้ถือว่าคุณคุ้นเคยกับ Angular และ TypeScript อยู่แล้ว หากยังไม่มั่นใจ ให้ดูเอกสารประกอบของ TypeScript และคู่มือเริ่มต้นใช้งาน Angular ใน angular.io

เริ่มต้นโปรเจ็กต์

อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Angular ช่วยให้คุณตั้งค่าแอปพลิเคชัน Angular ฝั่งไคลเอ็นต์แบบง่ายได้อย่างรวดเร็ว โพสต์นี้มีข้อมูลเบื้องต้นสั้นๆ เกี่ยวกับ CLI ส่วนโพสต์อื่นๆ ในคอลเล็กชันจะแสดงวิธีเพิ่มฟีเจอร์ขั้นสูงเพิ่มเติม เช่น การแสดงผลฝั่งเซิร์ฟเวอร์และการรองรับการทําให้ใช้งานได้

ตั้งค่า CLI

ในการเริ่มต้น ให้ติดตั้ง CLI ทั่วโลกและยืนยันว่าคุณใช้เวอร์ชันล่าสุดโดยเรียกใช้คําสั่งต่อไปนี้

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

ตรวจสอบว่าคำสั่งสุดท้ายแสดงผลเป็นเวอร์ชัน 8.0.3 ขึ้นไป

หรือหากไม่ต้องการติดตั้ง CLI ทั่วโลก คุณสามารถติดตั้งในเครื่องและเรียกใช้ด้วยคําสั่ง npx ดังนี้

npm i @angular/cli
npx ng
--version

สร้างโปรเจ็กต์

วิธีสร้างการเรียกใช้โปรเจ็กต์ใหม่

ng new my-app

คำสั่งนี้จะสร้างไฟล์เริ่มต้นและโครงสร้างโฟลเดอร์สําหรับแอปพลิเคชัน รวมถึงติดตั้งโมดูล Node ที่จําเป็น

เมื่อกระบวนการตั้งค่าเสร็จสมบูรณ์แล้ว ให้เริ่มแอปพลิเคชันโดยเรียกใช้คำสั่งต่อไปนี้

cd my-app
ng serve

ตอนนี้คุณควรเข้าถึงแอปพลิเคชันได้ที่ http://localhost:4200

ขั้นตอนถัดไปคือ

ในส่วนที่เหลือของคอลเล็กชันนี้ คุณจะได้เรียนรู้วิธีปรับปรุงประสิทธิภาพและ SEO ของแอปพลิเคชัน Angular สิ่งที่ครอบคลุมมีดังนี้

  • การแยกโค้ดระดับเส้นทางใน Angular
  • งบประมาณด้านประสิทธิภาพด้วย Angular CLI
  • กลยุทธ์การเรียกข้อมูลเส้นทางล่วงหน้าใน Angular
  • การเพิ่มประสิทธิภาพการตรวจหาการเปลี่ยนแปลงใน Angular
  • แสดงรายการขนาดใหญ่เสมือนจริงด้วย Angular CDK
  • การแคชล่วงหน้าด้วย Angular Service Worker
  • แสดงผลหน้าเว็บล่วงหน้าด้วย Angular CLI
  • การแสดงผลฝั่งเซิร์ฟเวอร์ด้วย Angular Universal
  • เพิ่มไฟล์ Manifest ของเว็บแอปด้วย Angular CLI