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

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

Angular คืออะไร

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

คอลเล็กชันนี้มีข้อมูลอะไรบ้าง

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

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

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

สิ่งที่ไม่มีในคอลเล็กชันนี้

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

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

อินเทอร์เฟซบรรทัดคำสั่ง Angular (CLI) ช่วยให้คุณตั้งค่าแอปพลิเคชัน 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

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

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

cd my-app
ng serve

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

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

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

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