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

Question

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

我以为摇晃三下就可以去除它，但它并没有......

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

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

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

Answer 1

在与我的同事讨论这个问题后，我们认为它位于捆绑包中的原因是因为environment.production在运行时评估，所以树摇动不会从捆绑包中删除该模块。事件虽然没有真正使用。

不过，有一种方法可以解决这个问题。

首先创建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() : []
];

另一个用于托管产品构建的导入数组，其中包含以下内容

src/hat-trick/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 {}

并做了！下次您在生产模式下构建时，将不再包含 StoreDevtoolsModule（节省约 4kb）

NgRx 文档在隐藏位置具有与上述问题的评论相同的解决方案