شروع به کار: بهینه‌سازی برنامه Angular

می‌خواهید سایت Angular خود را تا حد امکان سریع و دردسترس کنید؟ جای درستی آمده‌اید!

Angular چیست؟

‫Angular چارچوبی برای ساختن میانای کاربر است. این پلاتفرم بلوک‌های سازنده‌ای را ارائه می‌دهد که به شما کمک می‌کند به‌سرعت یک برنامه قابل‌نگهداری و مقیاس‌پذیر راه‌اندازی کنید. Angular به توسعه‌دهندگان امکان می‌دهد برنامه‌هایی ایجاد کنند که در وب، تلفن همراه، یا رایانه اجرا می‌شوند.

چه چیزی در این مجموعه است؟

این مجموعه بر پنج حوزه اصلی برای بهینه‌سازی برنامه Angular تمرکز دارد:

  • بهبود عملکرد برنامه شما برای افزایش تبدیل و تعامل کاربر
  • بهبود قابلیت اطمینان برنامه‌تان در شبکه‌های ضعیف با پیش‌ذخیره‌سازی دارایی‌ها با Angular service worker
  • قابل‌شناسایی کردن برنامه شما برای موتورهای جستجو و روبات‌های رسانه‌های اجتماعی بااستفاده از پیش‌پرداز و پرداز سمت سرور
  • نصب‌شدنی کردن برنامه برای ارائه تجربه کاربری مشابه با برنامه iOS/Android

هر پست در این مجموعه روش‌هایی را شرح می‌دهد که می‌توانید مستقیماً در برنامه‌های خودتان اعمال کنید.

چه چیزی در این مجموعه نیست؟

این مجموعه فرض می‌کند که شما ازقبل با Angular و TypeScript آشنا هستید. اگر هنوز با آن‌ها احساس راحتی نمی‌کنید، اسناد TypeScript و راهنمای شروع به کار با Angular را در angular.io بررسی کنید.

پروژه‌ای را شروع کنید

میانای خط فرمان (CLI) Angular به شما امکان می‌دهد به‌سرعت یک برنامه Angular ساده سمت کارخواه راه‌اندازی کنید. این پست مقدمه کوتاهی درباره CLI دارد، درحالی‌که پست‌های دیگر در این مجموعه نشان می‌دهند که چگونه ویژگی‌های پیشرفته‌تری مانند پشتیبانی از استقرار و پردازش سمت سرور را اضافه کنید.

راه‌اندازی CLI

برای شروع، CLI را به‌صورت سراسری نصب کنید و با اجرای این فرمان‌ها درستی‌سنجی کنید که جدیدترین نسخه را دارید:

npm i -g @angular/cli
ng version

مطمئن شوید که آخرین فرمان نسخه ۸.۰.۳ یا جدیدتر را خروجی می‌دهد.

یا اگر نمی‌خواهید CLI را به‌صورت سراسری نصب کنید، می‌توانید آن را به‌صورت محلی نصب کنید و با فرمان npx اجرا کنید:

npm i @angular/cli
npx ng version

ایجاد پروژه

برای ایجاد اجرای پروژه جدید:

ng new my-app

این فرمان فایل‌های اولیه و ساختار پوشه را برای برنامه شما ایجاد می‌کند و ماژول‌های گره موردنیاز آن را نصب می‌کند.

وقتی فرایند راه‌اندازی باموفقیت تکمیل شد، برنامه‌تان را با اجرای این دستور شروع کنید:

cd my-app
ng serve

اکنون باید بتوانید در http://localhost:4200 به برنامه‌تان دسترسی پیدا کنید.

حالا چه می‌شود؟

در ادامه این مجموعه، با نحوه بهبود عملکرد و بهینه‌سازی موتور جستجوی برنامه Angular آشنا خواهید شد. موارد تحت پوشش:

  • تقسیم کد در سطح مسیر در Angular
  • بودجه‌های عملکرد با Angular CLI
  • Route Prefetching Strategies in Angular
  • بهینه‌سازی تشخیص تغییر در Angular
  • مجازی‌سازی فهرست‌های بزرگ با Angular CDK
  • پیش‌ذخیره‌سازی با Angular Service Worker
  • پیش‌پرداخت مسیرها با Angular CLI
  • پرداز زدن سمت سرور با Angular Universal
  • افزودن مانیفست برنامه وب با Angular CLI