为什么StoreDevtoolsModule在我的生产捆绑包中,以及如何从中删除它?

在与我的同行讨论了这个问题后,我们认为它被捆绑在一起的原因是因为 environment.production 在运行时评估,树抖动不会从捆绑包中删除模块。事件,尽管它并没有真正使用。

不过还是有办法解决的。

首先创建2个文件:

一个用于承载非prod(默认)的导入数组,包含以下内容

src/hat-tick/store-dev-tools-import.ts

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

export const storeDevToolsImport = [
    !environment.production ? StoreDevtoolsModule.instrument() : []
];

另一个用于托管prod构建的导入数组,内容如下

src/hat-tick/store-dev-tools-import.prod.ts:

export const storeDevToolsImport = [];

添加一个 fileReplacements 部分添加到您的 angular.json 生产构建配置中的文件:

"production": {
 (....)
    "fileReplacements": [
        (....)
        {
            "replace": "src/hat-trick/store-dev-tools-import.ts",
            "with": "src/hat-trick/store-dev-tools-import.prod.ts"
        },
    ]
}

最后,使用新变量 storeDevToolsImport 在模块中,而不是导入 StoreDevtoolsModule 直接:

@NgModule({
    imports: [
        (....),

        ...storeDevToolsImport,

        (....),
    ],
})
export class AppModule {}

完成了!下次在prod模式下构建时,StoreDevtoolsModule将不再包含在内(节省约4kb)

NgRx文档在 hidden spot 根据对上述问题的评论

它可以简单到添加以下行。

@NgModule({
  declarations: [AppComponent],
  imports: [
    [... other imports]
    !environment.production ? StoreDevtoolsModule.instrument({
          name: 'overview',
          maxAge: 25,
        }) : [], // 👈🏻👈🏻👈🏻
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}