为什么 StoreDevtoolsModule 在我的生产包中，以及如何从那里删除它？答案

【问题标题】：Why is StoreDevtoolsModule in my production bundle, and how to remove it from there?为什么 StoreDevtoolsModule 在我的生产包中，以及如何从那里删除它？
【发布时间】：2022-10-15 12:35:05
【问题描述】：

使用 webpack-bundle-analyzer 我检测到模块 StoreDevtoolsModule 到我的生产包中。

我虽然 three shaking 会删除它，但它没有......

没有它有没有办法在生产模式下构建？（它无论如何都不会在生产中使用）：

(....)
//                \/ this one
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
    imports: [
        (....),
        !environment.production ? StoreDevtoolsModule.instrument() : [],
        (....),
    ],
})
export class AppModule {}

【问题讨论】：

ngrx.io/guide/store-devtools/recipes/exclude
有趣的是，他们在文档中保留了这个模糊的“食谱”选项卡，我想大多数人都会想念它，就像我一样。好吧，下面的答案与他们的方法相同，我将在此处更新此链接。

标签： angular ngrx

【解决方案1】：

在与我的同行讨论了这个问题后，我们认为它存在于包中的原因是因为 environment.production 在运行时被评估，tree shaking 不会从包中删除模块。事件虽然它并没有真正使用。

不过有办法解决。

首先创建2个文件：

一个托管非产品的导入数组（默认），具有以下内容

src/帽子戏法/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/帽子戏法/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 中具有相同的解决方案

【讨论】：

【解决方案2】：

它可以像添加以下行一样简单。

@NgModule({
  declarations: [AppComponent],
  imports: [
    [... other imports]
    !environment.production ? StoreDevtoolsModule.instrument() : [], // ??????
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

【讨论】：