הסרת `@ngrx/store-devtools` בסביבת production

This video explains the best practice of removing @ngrx/store-devtools in production environments to optimize application performance, along with practical steps to implement this effectively.

בסביבת production עליך להסיר את @ngrx/store-devtools מה - bundle.
נראה דוגמא:

יצירת אפליקציה Angular חדשה

npx @angular/cli@latest new ngrx-remove-devtools --style css --routing false --minimal

התקנת @ngrx/store ו @ngrx/store-devtools

cd ngrx-remove-devtools
npx ng add @ngrx/store --skip-confirmation
npx ng add @ngrx/store-devtools@latest --skip-confirmation

אכלוס ה state

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(
      {
        counter: () => 0,
      },
      {}
    ),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: !isDevMode()}),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

בחינת ה state

במידה והתקנתם את Redux dev tools תוכלו לבחון את ה state שלכם.

ng serve

בעיה בבדיקת ה state בסביבת production

מומלץ להשבית את redux dev tools בסביבת production.

npx ng build
cd dist/ngrx-remove-devtools
npx http-server

redux dev tools עדיין עובד ב production

פתרון 1

הסר את StoreDevtoolsModule.instrument מה imports בסביבת production.

npx ng generate environments

הוסיפו מפתח production לקובץ הסביבות:

src/environments/environment.development.ts

export const environment = {
  production: false,
};

src/environments/environment.ts

export const environment = {
  production: true,
};

app.module.ts

import {environment} from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(
      {
        counter: () => 0,
      },
      {}
    ),
    !environment.production ? StoreDevtoolsModule.instrument({maxAge: 25, logOnly: !isDevMode()}) : [],
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

בעיה

@ngrx/store-devtools עדיין ב bundle.

npx ng build --source-map
npx source-map-explorer dist/ngrx-remove-devtools/main.4a92d461e97ce051.js

@ngrx/store-devtools עדיין מוסיף כ - 16kb של קוד ל bundle שלך.

החלפה ב app.module.ts

ניתן להשיג את אותו תוצאה עם fileReplacement.

src/app/imports.common.ts

import {BrowserModule} from '@angular/platform-browser';
import {StoreModule} from '@ngrx/store';

export const commonImports = [
  BrowserModule,
  StoreModule.forRoot(
    {
      counter: () => 0,
    },
    {}
  ),
];

src/app/imports.development.ts

import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {commonImports} from './imports.common';
import {isDevMode} from '@angular/core';

export const imports = [
  ...commonImports,
  StoreDevtoolsModule.instrument({maxAge: 25, logOnly: !isDevMode()})
];

src/app/imports.ts

import {commonImports} from './imports.common';

export const imports = [...commonImports];

src/app/app.module.ts

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {imports} from './imports';

@NgModule({
  declarations: [AppComponent],
  imports: [...imports],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

התוצאה היא הסרה של @ngrx/store-devtools מה - bundle.