为什么StoreDevtoolsModule在我的生产bundle中，以及如何从中删除它

Question

使用webpack捆绑包分析器，我在生产捆绑包中检测到模块StoreDevtoolsModule。

我以为三次摇晃就能消除它，但它没有。。。

有没有一种方法可以在没有它的情况下构建生产模式？(在生产中无论如何都不使用(：

(....)
//                / this one
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
(....),
!environment.production ? StoreDevtoolsModule.instrument() : [],
(....),
],
})
export class AppModule {}

Answer 1

在与我的同行讨论了这个问题后，我们认为它在捆绑包中的原因是因为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() : []
];

另一个用于托管产品构建的导入数组，具有以下内容

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文档在一个隐藏的地方有相同的解决方案，根据上面的问题的评论

Answer 2

只需添加以下行即可。

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