@ngrx/store-devtools 用于生产模式

Question

我正在使用带有 Chrome 扩展的 @ngrx/store-devtools 工具。

在生产模式下禁用它是否有意义？

Answer 1

当您处于生产模式时，您可以简单地不将其导入到您的 NgModule 中，方法如下：

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

let dev = [
  StoreDevtoolsModule.instrumentOnlyWithExtension()
];
if (environment.production) {
  dev = [];
  enableProdMode();
}

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    ...dev
  ]
})
export class AppModule {}

Answer 2

最初接受的答案将 store-devtools 代码留在生产构建中，尽管它从未被使用过。

要从生产构建中完全删除 store-devtools 并在这样做时节省包大小：

创建文件夹src/app/build-specifics

创建文件index.ts

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
export buildSpecificModules = [StoreDevtoolsModule.instrument({maxAge: 25})];

创建文件index.prod.ts

export buildSpecificModules = [];

在angular.json中添加相关的文件替换。这将用 index.prod.ts 替换生产构建中的 src/app/build-specifics/index.ts，从而从生产构建中删除 store-devtools。

"production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "serviceWorker": true,
    "ngswConfigPath": "src/ngsw-config.json",
    "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        },
        {
            "replace": "src/app/build-specifics/index.ts",
            "with": "src/app/build-specifics/index.prod.ts"
        }
    ]
}

在 app.module.ts 中包含默认文件，就像在环境中一样，angular.json fileReplacements 将在构建应用程序时更改实际包含的文件。

import { buildSpecificModules } from './build-specifics';

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    ...buildSpecificModules
  ]
})
export class AppModule {}

@ngrx/store-devtools 用于生产模式

@ngrx/store-devtools for production mode

ngrx

angular