هنگام توسعه یک برنامه Angular با NgRx، NgRx DevTools می تواند برای اشکال زدایی و نظارت بر تغییرات حالت فوق العاده مفید باشد. با این حال، وقتی نوبت به استقرار برنامه‌تان در تولید می‌رسد، بهتر است ابزارهای توسعه‌دهنده را از باندل خود حذف کنید و از بارگذاری غیرضروری آنها خودداری کنید. این مقاله شما را در فرآیند پیکربندی جایگزینی فایل های خاص برای رسیدن به این هدف راهنمایی می کند.
برای شروع، باید دو فایل ایجاد کنید که ارائه دهندگان NgRx DevTools را مدیریت کنند. به آنها زنگ بزنیم ngrx-devtools.development.ts و ngrx-devtools.ts.
در ngrx-devtools.development.ts فایل، توابع لازم را از آن وارد کنید @ngrx/store-devtools و @angular/core. سپس یک ثابت به نام تعریف کنید ngrxDevtools که پیکربندی NgRx DevTools را فراهم می کند.
در اینجا یک مثال از آنچه که ngrx-devtools.development.ts فایل ممکن است به این صورت باشد:
import { provideStoreDevtools } from "@ngrx/store-devtools";
import { isDevMode } from "@angular/core";
export const ngrxDevtools = provideStoreDevtools({
maxAge: 25,
logOnly: !isDevMode()
});
بعد، در ngrx-devtools.ts فایل، یک ثابت به نام تعریف کنید ngrxDevtools به عنوان آرایه ای از EnvironmentProviders. این مرحله تضمین می کند که وقتی جایگزینی فایل در تولید اعمال می شود، یک آرایه خالی به جای پیکربندی واقعی ابزارهای مستقل استفاده می شود.
در اینجا یک مثال از آنچه که ngrx-devtools.ts فایل ممکن است شبیه به:
import { EnvironmentProviders } from "@angular/core";
export const ngrxDevtools: EnvironmentProviders[] = [];
اکنون می توانید پیکربندی NgRx DevTools را در فایل بوت استرپ برنامه خود، مانند main.ts یا app.module.ts. وارد کنید ngrxDevtools ثابت از ngrx-devtools.ts فایل.
در اینجا مثالی از نحوه ارائه پیکربندی NgRx DevTools در فایل بوت استرپ آورده شده است:
import { ngrxDevtools } from "./devtools/ngrx-devtools";
bootstrapApplication(AppComponent, {
providers: [..., ngrxDevtools]
}).catch(err => console.error(err));
علاوه بر این، فراموش نکنید که پیکربندی را برای جایگزینی فایل به فایل angular.json اضافه کنید.
"projects": {
"app-name": {
"architect": {
"build": {
"configurations": {
"development": {
"fileReplacements": [
{
"replace": "src/devtools/ngrx-devtools.ts",
"with": "src/devtools/ngrx-devtools.development.ts"
}
]
}
}
}
}
}
}
در طول توسعه، زمانی که در حالت توسعه هستید، NgRx DevTools گنجانده شده و مطابق انتظار عمل می کند. با این حال، هنگامی که به حالت تولید تغییر می‌کنید، پیکربندی جایگزینی فایل اعمال می‌شود. فایل مناسب جایگزین می‌شود، و NgRx DevTools در کد تولید شما گنجانده نمی‌شود، که در نتیجه اندازه بسته‌های کوچک‌تر و احتمالاً چند کیلوبایت صرفه‌جویی می‌شود.
به یاد داشته باشید که مسیرها و نام فایل ها را با توجه به ساختار پروژه خود تنظیم کنید. با این راه‌اندازی، می‌توانید از مزایای NgRx DevTools در طول توسعه لذت ببرید و در عین حال بسته‌های تولید خود را ساده و کارآمد نگه دارید.
