آموزش تست و بهینه‌سازی در Angular

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

تست و بهینه‌سازی در Angular

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

چرا تست و بهینه‌سازی مهم است؟

افزایش قابلیت اطمینان: با نوشتن تست‌های دقیق و جامع، می‌توانید اطمینان حاصل کنید که تمام بخش‌های کد شما به درستی کار می‌کنند و تغییرات بعدی باعث شکستن اپلیکیشن نمی‌شوند.

کاهش هزینه رفع باگ: تست‌های خودکار امکان شناسایی سریع و رفع مشکلات در مراحل اولیه توسعه را فراهم می‌کنند که از هزینه‌های بعدی جلوگیری می‌کند.

بهبود تجربه کاربر: بهینه‌سازی عملکرد باعث کاهش زمان بارگذاری، افزایش روانی اپلیکیشن، و بهبود تجربه کلی کاربران می‌شود.

مراحل تست و بهینه‌سازی در Angular

تست:

نوشتن تست‌های واحد (Unit Tests) برای بررسی عملکرد بخش‌های کوچک مانند کامپوننت‌ها و سرویس‌ها.
انجام تست‌های جامع‌تر (Integration Tests) برای بررسی تعامل بین بخش‌های مختلف اپلیکیشن.
استفاده از ابزارهای پیشرفته مانند Jasmine، Karma و Protractor برای اجرای تست‌های خودکار.

بهینه‌سازی:

کاهش اندازه باندل با استفاده از تکنیک‌هایی مانند Tree Shaking.
بارگذاری ماژول‌ها به صورت Lazy Loading برای بهبود سرعت بارگذاری اولیه اپلیکیشن.
استفاده از Angular Universal برای رندرینگ سمت سرور (SSR) به منظور بهبود SEO و سرعت لود.

استقرار:

ایجاد نسخه نهایی اپلیکیشن با ابزار Angular CLI.
استفاده از سرویس‌های ابری مانند Firebase یا AWS برای میزبانی و ارائه اپلیکیشن.
ابزارها و تکنیک‌ها در تست و بهینه‌سازی Angular
Jasmine و Karma: برای نوشتن و اجرای تست‌های خودکار.
Angular CLI: برای تنظیم پروژه، تست و ساخت نسخه‌های بهینه‌شده.
Webpack: برای فشرده‌سازی کد و حذف کدهای اضافی.
Profiler Chrome: برای تحلیل عملکرد اپلیکیشن در مرورگر.

تست و بهینه‌سازی در Angular نه تنها کیفیت و کارایی اپلیکیشن را افزایش می‌دهد، بلکه باعث کاهش هزینه‌های توسعه و ارتقای رضایت کاربران می‌شود. این فرآیند یک گام ضروری برای توسعه‌دهندگانی است که به دنبال ساخت اپلیکیشن‌های حرفه‌ای هستند.

Unit Testing در Angular

Unit Testing یا تست واحد، فرآیند تست کردن بخش‌های کوچکی از کد مانند کامپوننت‌ها، سرویس‌ها یا پایپ‌ها به صورت مستقل است. در Angular، Jasmine و Karma دو ابزار اصلی برای نوشتن و اجرای تست‌های واحد هستند. این روش تضمین می‌کند که هر بخش از اپلیکیشن به‌صورت جداگانه و با کیفیت بالا کار می‌کند.

چرا Unit Testing مهم است؟

کاهش باگ‌ها: مشکلات در کد زودتر شناسایی و رفع می‌شوند.
افزایش پایداری: با انجام تست‌های خودکار، تغییرات بعدی در کد باعث شکستن عملکرد اپلیکیشن نمی‌شوند.
افزایش اعتماد به کد: تست‌های موفق نشان می‌دهند که هر بخش از اپلیکیشن به‌درستی کار می‌کند.

تست کامپوننت‌ها و سرویس‌ها با Jasmine

Jasmine یک فریم‌ورک تست‌نویسی قدرتمند و ساده است که امکان نوشتن تست‌های خوانا و قابل مدیریت را فراهم می‌کند. در Angular، TestBed برای تنظیم و شبیه‌سازی محیط اجرای کامپوننت‌ها و سرویس‌ها استفاده می‌شود.

1. تنظیم محیط تست

Angular CLI تنظیمات مورد نیاز برای اجرای تست‌های خودکار با Jasmine و Karma را فراهم می‌کند. برای اجرای تست‌ها از دستور زیر استفاده کنید:

ng test

این دستور تست‌ها را اجرا کرده و نتایج را در کنسول و مرورگر نمایش می‌دهد.

2. نوشتن تست کامپوننت‌ها

در اینجا، نحوه تست یک کامپوننت ساده به نام HelloComponent نشان داده می‌شود:

کامپوننت:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<h1>Hello, {{name}}!</h1>',
})
export class HelloComponent {
  name = 'World';
}

تست کامپوننت:

import { TestBed } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

describe('HelloComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HelloComponent], // اعلام کامپوننتی که تست می‌شود
    });
  });

  it('should display "Hello, World!"', () => {
    const fixture = TestBed.createComponent(HelloComponent); // ایجاد نمونه تست
    const compiled = fixture.nativeElement as HTMLElement; // دسترسی به DOM کامپوننت
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, World!'); // بررسی متن داخل تگ H1
  });
});

توضیحات:
TestBed.configureTestingModule محیط تست را با وارد کردن کامپوننت‌های مورد نیاز تنظیم می‌کند.
fixture.nativeElement به ما امکان دسترسی به DOM کامپوننت را می‌دهد.
expect یک Matcher در Jasmine است که برای بررسی نتایج استفاده می‌شود.

3. نوشتن تست سرویس‌ها

تست سرویس‌ها نیز مشابه کامپوننت‌ها انجام می‌شود. فرض کنید یک سرویس ساده دارید که پیام‌ها را مدیریت می‌کند:

سرویس:

export class MessageService {
  getMessage(): string {
    return 'Hello from Service!';
  }
}

تست سرویس:

import { TestBed } from '@angular/core/testing';
import { MessageService } from './message.service';

describe('MessageService', () => {
  let service: MessageService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [MessageService], // اعلام سرویس برای تست
    });
    service = TestBed.inject(MessageService); // ایجاد نمونه از سرویس
  });

  it('should return a message', () => {
    const message = service.getMessage();
    expect(message).toBe('Hello from Service!'); // بررسی خروجی متد
  });
});

توضیحات:

TestBed.inject برای ایجاد نمونه‌ای از سرویس استفاده می‌شود.
سرویس‌ها معمولاً نیاز به وابستگی‌های دیگری ندارند، اما در صورت وجود، Angular DI به‌خوبی آن‌ها را مدیریت می‌کند.

نکات کلیدی در Unit Testing

تفکیک مسئولیت‌ها: هر تست باید تنها یک بخش خاص از کد را بررسی کند. از تست کردن بخش‌های متعدد در یک تست خودداری کنید.

موک کردن وابستگی‌ها: از Mock یا Spy برای شبیه‌سازی وابستگی‌ها در تست استفاده کنید تا از عملکرد واقعی کد اطمینان حاصل کنید.

خوانایی: تست‌ها باید خوانا و ساده باشند تا دیگر توسعه‌دهندگان بتوانند به راحتی آن‌ها را درک کنند.

اجرای منظم: تست‌ها را به‌طور مداوم و در هر مرحله از توسعه اجرا کنید تا تغییرات ناخواسته شناسایی شوند.

Unit Testing در Angular با استفاده از ابزارهای قدرتمندی مانند Jasmine و TestBed به توسعه‌دهندگان این امکان را می‌دهد که اپلیکیشن‌هایی پایدار، قابل اعتماد و با کیفیت بالا ایجاد کنند. با تمرین و استفاده مداوم از این روش‌ها، می‌توانید از عملکرد صحیح تمام بخش‌های کد اطمینان حاصل کنید.

تست فرم‌ها و رفتارها با Karma

Karma به عنوان یک Test Runner در Angular عمل می‌کند که برای اجرای تست‌های خودکار در محیط‌های مختلف (مانند مرورگرها) طراحی شده است. یکی از موارد مهم در تست اپلیکیشن‌های Angular، بررسی عملکرد فرم‌ها و رفتارهای مرتبط با آن‌ها است. در این بخش، نحوه تست فرم‌ها با استفاده از قابلیت‌های Reactive Forms و Karma توضیح داده می‌شود.

اهمیت تست فرم‌ها

اعتبارسنجی داده‌ها: فرم‌ها نقطه تعامل اصلی کاربران با اپلیکیشن هستند. تست آن‌ها تضمین می‌کند که داده‌ها به‌درستی اعتبارسنجی و مدیریت شوند.
کنترل‌های قابل اعتماد: بررسی صحت عملکرد کنترل‌های فرم مانند فیلدهای ورودی، دکمه‌ها، و پیام‌های خطا.
جلوگیری از باگ‌های کاربری: اطمینان از اینکه رفتار فرم در تمامی شرایط مطابق انتظار است.

1. ایجاد یک فرم ساده

در این مثال، یک فرم ورود به سیستم با دو فیلد username و password ایجاد می‌کنیم.

کد کامپوننت:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-login',
  template: `
    <form [formGroup]="loginForm">
      <input formControlName="username" placeholder="Username" />
      <input formControlName="password" placeholder="Password" type="password" />
    </form>
  `,
})
export class LoginComponent {
  loginForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      username: [''],
      password: [''],
    });
  }
}

2. نوشتن تست برای فرم

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

کد تست:

import { TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [ReactiveFormsModule], // وارد کردن ReactiveFormsModule
    });
  });

  it('should create a form with username and password controls', () => {
    const fixture = TestBed.createComponent(LoginComponent);
    const component = fixture.componentInstance;

    // بررسی وجود کنترل‌های فرم
    expect(component.loginForm.contains('username')).toBeTruthy();
    expect(component.loginForm.contains('password')).toBeTruthy();
  });
});

توضیحات:
ReactiveFormsModule برای استفاده از فرم‌های واکنشی وارد می‌شود.
loginForm.contains(‘username’) بررسی می‌کند که کنترل username در فرم وجود دارد.

3. تست رفتار فرم

برای بررسی رفتار فرم، مانند اعتبارسنجی ورودی‌ها یا تعامل با داده‌ها، می‌توانید تست‌های بیشتری بنویسید.

تست اعتبارسنجی ورودی‌ها

فرض کنید فیلد username باید حداقل 5 کاراکتر باشد. می‌توانید این اعتبارسنجی را تست کنید:

اضافه کردن اعتبارسنجی:

this.loginForm = this.fb.group({
  username: ['', [Validators.required, Validators.minLength(5)]],
  password: [''],
});

نوشتن تست اعتبارسنجی:

it('should mark username as invalid if it is less than 5 characters', () => {
  const fixture = TestBed.createComponent(LoginComponent);
  const component = fixture.componentInstance;

  const usernameControl = component.loginForm.get('username');
  usernameControl?.setValue('abc'); // مقدار کوتاه‌تر از 5 کاراکتر

  expect(usernameControl?.valid).toBeFalsy(); // بررسی نامعتبر بودن کنترل
});

تست مقداردهی فرم با داده‌ها

فرض کنید می‌خواهید بررسی کنید که فرم به‌درستی با داده‌های کاربر مقداردهی می‌شود:

it('should populate the form with user data', () => {
  const fixture = TestBed.createComponent(LoginComponent);
  const component = fixture.componentInstance;

  component.loginForm.patchValue({
    username: 'testuser',
    password: '12345',
  });

  expect(component.loginForm.get('username')?.value).toBe('testuser');
  expect(component.loginForm.get('password')?.value).toBe('12345');
});

4. اجرای تست‌ها با Karma

برای اجرای تست‌ها:

اطمینان حاصل کنید که Angular CLI به درستی نصب شده است.
دستور زیر را اجرا کنید:

ng test

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

نکات کلیدی در تست فرم‌ها

تست اعتبارسنجی‌ها: همیشه اعتبارسنجی‌های مهم مانند طول، الگو، و الزامی بودن را تست کنید.
تست تعاملات کاربر: رفتار فرم در برابر ورود یا تغییر داده‌ها را بررسی کنید.
استفاده از Spy و Mock: برای شبیه‌سازی داده‌ها و سرویس‌ها از Mock استفاده کنید.

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

بهینه‌سازی اپلیکیشن

بهینه‌سازی اپلیکیشن‌های Angular از اصول حیاتی برای بهبود عملکرد و کاهش زمان بارگذاری است. با استفاده از تکنیک‌هایی مانند Lazy Loading و Tree Shaking، می‌توانید اپلیکیشن‌هایی سریع‌تر و کارآمدتر بسازید که تجربه کاربری بهتری ارائه دهند.

Lazy Loading

Lazy Loading یکی از مهم‌ترین تکنیک‌ها برای بهینه‌سازی عملکرد اپلیکیشن‌های Angular است. این تکنیک به شما امکان می‌دهد ماژول‌های غیرضروری را تنها در زمان مورد نیاز بارگذاری کنید. به جای اینکه تمام ماژول‌های اپلیکیشن در زمان بارگذاری اولیه (Initial Load) لود شوند، Angular آن‌ها را به صورت پویا بارگذاری می‌کند.

مزایای Lazy Loading:

کاهش زمان بارگذاری اولیه: تنها ماژول‌های ضروری بارگذاری می‌شوند و بقیه به صورت تأخیری بارگذاری خواهند شد.
بهبود عملکرد در دستگاه‌های کم‌قدرت: کاهش فشار بر روی حافظه و پردازشگر.
مدیریت بهتر ماژول‌ها: تقسیم اپلیکیشن به ماژول‌های کوچک‌تر باعث نگهداری بهتر کد می‌شود.

پیاده‌سازی Lazy Loading

فرض کنید اپلیکیشن شما دارای یک ماژول به نام FeatureModule است. برای اعمال Lazy Loading از loadChildren در تنظیمات مسیر (RouterModule) استفاده کنید.

تنظیم مسیرها:

const routes = [
  {
    path: 'feature',
    loadChildren: () =>
      import('./feature/feature.module').then((m) => m.FeatureModule), // بارگذاری ماژول به صورت Lazy
  },
];

نکات:

import به صورت پویا انجام می‌شود که ماژول را تنها هنگام دسترسی به مسیر بارگذاری می‌کند.
Angular CLI به طور خودکار این مسیرها را در باندل جداگانه تقسیم می‌کند.

بررسی Lazy Loading

برای بررسی عملکرد Lazy Loading:

ابزار Chrome DevTools را باز کنید.
در بخش Network، رفتار بارگذاری فایل‌ها را مشاهده کنید.
مسیر مربوطه را باز کنید و بررسی کنید که فایل‌های مربوط به ماژول فقط در زمان نیاز بارگذاری شده‌اند.

Tree Shaking

Tree Shaking تکنیکی است که کدهای غیرقابل استفاده یا بدون وابستگی را از پروژه حذف می‌کند. این فرایند باعث کاهش اندازه باندل و بهبود سرعت بارگذاری اپلیکیشن می‌شود.

چگونه Tree Shaking کار می‌کند؟

تحلیل وابستگی‌ها: ابزار Webpack بررسی می‌کند که کدام بخش‌های کد استفاده می‌شوند.
حذف کدهای اضافی: کدهایی که استفاده نمی‌شوند، در خروجی نهایی حذف می‌شوند.

مزایای Tree Shaking:

کاهش سایز باندل: حجم فایل خروجی کاهش یافته و زمان بارگذاری اپلیکیشن بهبود می‌یابد.
بهینه‌سازی خودکار: در Angular، Tree Shaking به طور پیش‌فرض فعال است و نیازی به تنظیمات دستی ندارد.
افزایش عملکرد: کد تمیزتر و سریع‌تر اجرا می‌شود.

استفاده از Tree Shaking در Angular

Angular از ابزار Webpack برای انجام Tree Shaking استفاده می‌کند. برای فعال‌سازی و بهره‌مندی از آن:

مطمئن شوید که اپلیکیشن در حالت تولیدی (Production) ساخته می‌شود:

ng build --prod

خروجی نهایی باندل را بررسی کنید. سایز فایل‌ها باید بهینه شده باشد.

نکاتی برای افزایش کارایی Tree Shaking:

استفاده از ES Modules: Angular به طور پیش‌فرض از ماژول‌های ES6 استفاده می‌کند که برای Tree Shaking ضروری است.
حذف کتابخانه‌های غیرضروری: تنها کتابخانه‌هایی را اضافه کنید که استفاده می‌شوند.
استفاده از Angular CLI: ابزار CLI به‌طور خودکار تنظیمات مربوط به Tree Shaking را مدیریت می‌کند.

ترکیب Lazy Loading و Tree Shaking

با ترکیب این دو تکنیک، می‌توانید اپلیکیشن‌های Angular را به‌شدت بهینه کنید:

ماژول‌های غیرضروری به صورت Lazy Load بارگذاری شوند.
کدهای اضافی حذف شوند تا حجم خروجی کاهش یابد.
مثال: فرض کنید اپلیکیشن شما شامل سه ماژول بزرگ است:

HomeModule
FeatureModule
AdminModule
برای هر ماژول، Lazy Loading را اعمال کنید و مطمئن شوید که فقط کدهای مورد نیاز در باندل نهایی باقی می‌مانند. پس از اعمال تنظیمات، فایل‌های خروجی کوچک‌تر و بارگذاری سریع‌تری خواهید داشت. Lazy Loading و Tree Shaking دو تکنیک کلیدی برای بهینه‌سازی اپلیکیشن‌های Angular هستند. Lazy Loading با تأخیر در بارگذاری ماژول‌های غیرضروری باعث بهبود سرعت اپلیکیشن می‌شود، در حالی که Tree Shaking با حذف کدهای اضافی به کاهش حجم باندل کمک می‌کند. با استفاده از این تکنیک‌ها، می‌توانید اپلیکیشن‌هایی با عملکرد بالا و تجربه کاربری بهتر بسازید.

استفاده از Angular Universal برای رندرینگ سمت سرور (SSR)

Angular Universal ابزاری برای فعال‌سازی رندرینگ سمت سرور (Server-Side Rendering یا SSR) در اپلیکیشن‌های Angular است. این قابلیت باعث می‌شود که HTML کامل صفحه قبل از ارسال به مرورگر کاربر تولید شود. SSR به بهبود SEO و افزایش سرعت بارگذاری صفحه کمک می‌کند، به خصوص در اپلیکیشن‌هایی که به شدت وابسته به داده‌ها هستند یا نیاز به بارگذاری سریع در دستگاه‌های کم‌قدرت دارند.

مزایای Angular Universal و SSR

بهبود SEO:

موتورهای جستجو معمولاً با صفحات مبتنی بر JavaScript مشکل دارند. Angular Universal HTML صفحه را روی سرور تولید می‌کند و آن را به موتورهای جستجو ارائه می‌دهد، که باعث بهبود نمایه‌سازی محتوا می‌شود.
کاهش زمان بارگذاری اولیه:

SSR به کاربران اجازه می‌دهد محتوا را سریع‌تر مشاهده کنند، حتی قبل از بارگذاری کامل فایل‌های جاوا اسکریپت.
بهبود تجربه کاربری:

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

بخش اعظم پردازش توسط سرور انجام می‌شود، که فشار کمتری بر روی مرورگر کاربر وارد می‌کند.

مراحل پیاده‌سازی Angular Universal (SSR)

برای پیاده‌سازی Angular Universal، باید پروژه خود را برای رندرینگ سمت سرور تنظیم کنید. مراحل زیر شما را در این فرآیند راهنمایی می‌کند:

1. افزودن Angular Universal به پروژه

ابتدا Angular Universal را به پروژه اضافه کنید. این کار را با استفاده از دستور زیر انجام دهید:

ng add @nguniversal/express-engine

این دستور:

پکیج‌های مورد نیاز (مانند @nguniversal/express-engine) را نصب می‌کند.
یک سرور Express.js تنظیم می‌کند تا Angular Universal روی آن اجرا شود.
تغییرات مورد نیاز را در فایل‌های پروژه شما اعمال می‌کند.

2. ساخت پروژه SSR

پس از تنظیم Universal، پروژه خود را برای SSR بسازید. از دستورات زیر استفاده کنید:

npm run build:ssr

این دستور دو باندل جداگانه تولید می‌کند:

باندل مرورگر: برای اجرای اپلیکیشن در سمت کلاینت.
باندل سرور: برای اجرای رندرینگ سمت سرور.

3. اجرای پروژه SSR

برای اجرای پروژه با قابلیت SSR، از دستور زیر استفاده کنید:

npm run serve:ssr

این دستور:

یک سرور Express.js را راه‌اندازی می‌کند.
اپلیکیشن شما را با استفاده از Angular Universal ارائه می‌دهد.
پس از اجرای دستور، می‌توانید اپلیکیشن SSR خود را در مرورگر باز کنید. به صورت پیش‌فرض، سرور روی پورت http://localhost:4000 اجرا می‌شود.

4. بررسی عملکرد SSR

برای تأیید اینکه SSR به درستی کار می‌کند:

باز کردن DevTools: در مرورگر خود ابزار توسعه‌دهنده را باز کنید.
بررسی HTML اولیه: در تب Elements، بررسی کنید که HTML صفحه شامل محتواهای رندر شده باشد.
SEO Testing Tools: از ابزارهای تست SEO مانند Google Search Console یا Lighthouse استفاده کنید تا مطمئن شوید که محتوا به درستی ایندکس شده است.

نکات مهم در استفاده از Angular Universal

حذف کد وابسته به مرورگر:

SSR در محیط Node.js اجرا می‌شود، بنابراین کدهای وابسته به مرورگر (مانند window، document یا localStorage) ممکن است باعث خطا شوند. برای جلوگیری از این مشکل، کدهای وابسته به مرورگر را بررسی کنید و از شرط‌هایی مانند زیر استفاده کنید:

if (isPlatformBrowser(this.platformId)) {
  // کد وابسته به مرورگر
}

پشتیبانی از داده‌های پویا:

برای بارگذاری داده‌ها از سرور، از سرویس‌هایی مانند TransferState استفاده کنید. این سرویس به شما کمک می‌کند داده‌ها را بین سرور و کلاینت به اشتراک بگذارید.

بهینه‌سازی عملکرد:

مطمئن شوید که اپلیکیشن شما برای SSR بهینه شده است. به عنوان مثال، از تکنیک‌هایی مانند Lazy Loading برای کاهش بار سرور استفاده کنید.

استفاده ترکیبی از SSR و CSR

پس از رندرینگ اولیه توسط سرور، اپلیکیشن به حالت CSR (Client-Side Rendering) تغییر می‌کند. این ترکیب بهترین نتیجه را ارائه می‌دهد:

SSR محتوا را سریع‌تر به کاربر ارائه می‌دهد.
CSR اجازه می‌دهد اپلیکیشن تعاملی باقی بماند.

Angular Universal با فراهم کردن قابلیت SSR، یک ابزار قدرتمند برای بهبود SEO، کاهش زمان بارگذاری اولیه، و ارتقای تجربه کاربری است. با پیاده‌سازی این قابلیت، می‌توانید اپلیکیشن‌هایی سریع‌تر، بهتر و با قابلیت نمایش بهتری در موتورهای جستجو بسازید. SSR به‌ویژه برای اپلیکیشن‌های بزرگ یا آن‌هایی که به SEO حساس هستند، یک گزینه عالی است.

استقرار پروژه

پس از تکمیل فرآیند توسعه و بهینه‌سازی، استقرار پروژه یک مرحله مهم برای ارائه اپلیکیشن به کاربران نهایی است. Angular ابزارها و امکاناتی را برای ساخت و استقرار اپلیکیشن به صورت بهینه فراهم می‌کند. در این بخش، نحوه ساخت نسخه نهایی و استقرار آن در یک هاست یا سرویس ابری مانند Firebase را بررسی می‌کنیم.

Build نهایی پروژه با ng build

برای ایجاد نسخه نهایی از پروژه Angular، از دستور زیر استفاده کنید:

ng build --prod

این دستور چه می‌کند؟
بهینه‌سازی: فایل‌های تولید شده شامل کدهای فشرده، فایل‌های CSS و JavaScript بهینه شده و حذف کدهای غیرضروری (Tree Shaking) هستند.
تفکیک فایل‌ها: فایل‌های خروجی در پوشه dist/ ذخیره می‌شوند که آماده استقرار هستند.
سازگاری مرورگرها: از Polyfills برای پشتیبانی از مرورگرهای قدیمی استفاده می‌کند.
تنظیمات اضافی:
می‌توانید از گزینه‌های اضافی برای شخصی‌سازی ساخت استفاده کنید:

فایل‌های مپ برای دیباگ:

ng build --prod --source-map

این گزینه فایل‌های نقشه (Source Maps) تولید می‌کند که برای دیباگ استفاده می‌شوند.
حذف هش از نام فایل‌ها:

ng build --prod --output-hashing=none

این دستور از تولید هش در نام فایل‌ها جلوگیری می‌کند.
پس از اجرای دستور، تمام فایل‌های مورد نیاز برای اجرای اپلیکیشن در فولدر dist/ قرار می‌گیرند.

استقرار در هاست یا سرویس‌های ابری

پس از تولید فایل‌های نهایی، باید پروژه را بر روی یک سرور یا سرویس ابری مستقر کنید. یکی از گزینه‌های محبوب برای استقرار Firebase است.

استقرار در Firebase

Firebase Hosting یکی از ساده‌ترین و سریع‌ترین روش‌ها برای استقرار اپلیکیشن‌های Angular است. این سرویس ابری از گوگل، امنیت بالا، سرعت مناسب، و قابلیت SSL رایگان را ارائه می‌دهد.

مراحل استقرار در Firebase:

نصب Firebase CLI: ابتدا ابزار Firebase CLI را نصب کنید:

npm install -g firebase-tools

ورود به Firebase: با اجرای دستور زیر به حساب Google خود وارد شوید:

firebase login

ایجاد فایل تنظیمات Firebase: با اجرای دستور زیر، تنظیمات مورد نیاز برای استقرار ایجاد می‌شود:

firebase init

در این مرحله:

گزینه Hosting را انتخاب کنید.
پوشه dist/<project-name> را به عنوان دایرکتوری عمومی (Public Directory) مشخص کنید.
در صورت نیاز، گزینه‌های مرتبط با SPA (Single Page Application) را فعال کنید.
ساخت و آماده‌سازی پروژه: اطمینان حاصل کنید که نسخه نهایی پروژه ساخته شده است:

ng build --prod

استقرار پروژه: دستور زیر را برای استقرار پروژه اجرا کنید:

firebase deploy

پس از اتمام، Firebase یک لینک ارائه می‌دهد که می‌توانید از طریق آن اپلیکیشن خود را مشاهده کنید.

دیگر گزینه‌های استقرار

استقرار در AWS:

از خدماتی مانند AWS S3 برای میزبانی اپلیکیشن‌های استاتیک استفاده کنید.
فایل‌های ساخته شده را در یک S3 Bucket آپلود کرده و CloudFront را برای CDN فعال کنید.

استقرار در Netlify:

فایل‌های نهایی را مستقیماً در داشبورد Netlify آپلود کنید.
یا از دستور netlify deploy برای اتوماسیون استفاده کنید.

استقرار در Vercel:

با استفاده از Vercel CLI می‌توانید پروژه Angular خود را به سرعت مستقر کنید:

vercel --prod

استقرار در Nginx (سرور اختصاصی):

فایل‌های نهایی را به یک سرور منتقل کنید.
پیکربندی فایل /etc/nginx/sites-available/default را برای میزبانی اپلیکیشن Angular تنظیم کنید:

server {
    listen 80;
    server_name your-domain.com;

    root /path/to/dist/project-name;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

سرور را ری‌استارت کنید:

sudo systemctl restart nginx

نکات کلیدی برای استقرار موفق

SSL و امنیت: اطمینان حاصل کنید که هاست یا سرویس شما از HTTPS پشتیبانی می‌کند. Firebase به صورت پیش‌فرض SSL ارائه می‌دهد.

بهینه‌سازی تصاویر: از ابزارهایی مانند ImageOptim یا TinyPNG برای کاهش حجم تصاویر استفاده کنید.

فشرده‌سازی محتوا: سرویس‌های میزبانی مانند Firebase یا Nginx می‌توانند فایل‌های شما را با استفاده از Gzip فشرده کنند.

پشتیبانی از SPA: مطمئن شوید که فایل index.html به درستی برای SPA تنظیم شده است تا مسیرهای داخلی Angular کار کنند.

استقرار پروژه مرحله‌ای حیاتی در چرخه توسعه اپلیکیشن است. با استفاده از ابزارهایی مانند Firebase Hosting یا سرویس‌های مشابه، می‌توانید اپلیکیشن خود را به راحتی و به سرعت در دسترس کاربران قرار دهید. استفاده از روش‌های بهینه‌سازی و سرویس‌های مناسب، تضمین‌کننده تجربه‌ای بهتر برای کاربران نهایی خواهد بود.

نتیجه‌گیری

تست و بهینه‌سازی در Angular یکی از مهم‌ترین مراحل در توسعه اپلیکیشن‌های حرفه‌ای است. با اجرای تست‌های دقیق و خودکار، می‌توانید از صحت عملکرد کد اطمینان حاصل کرده و هزینه‌های رفع باگ را کاهش دهید. همچنین، با استفاده از تکنیک‌های بهینه‌سازی مانند Lazy Loading، Tree Shaking و Angular Universal، اپلیکیشنی سریع‌تر، کارآمدتر، و سازگار با موتورهای جستجو ایجاد کنید. در نهایت، استقرار پروژه در سرویس‌های ابری مانند Firebase امکان ارائه سریع و امن اپلیکیشن را فراهم می‌کند.

با رعایت این اصول و تکنیک‌ها، می‌توانید اپلیکیشن‌هایی با عملکرد بالا، تجربه کاربری بهتر، و قابلیت اعتماد بیشتر بسازید و در مسیر تبدیل شدن به یک توسعه‌دهنده حرفه‌ای Angular گام بردارید.