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

Question

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

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

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

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

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

Answer 1

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

不过还是有办法的。

先创建2个文件：

一个用于托管非产品的导入数组（默认），内容如下

src/hat-trick/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 = [];

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

"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 中根据对上述问题的评论

提供了相同的解决方案

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

Why is StoreDevtoolsModule in my production bundle, and how to remove it from there?

angular

ngrx