为什么我的生产捆绑包中有StoreDevols模块，以及如何从那里删除它？

问题描述

使用webpack-bundle-analyzer我检测到我的生产捆绑包中有模块StoreDevols模块。

我认为three shaking会删除它，但它没有...

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

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

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

推荐答案

在与我的同事讨论这个问题后，我们认为它在包中的原因是因为environment.production是在运行时计算的，所以树摇动不会从包中删除模块。事件，但并未真正使用它。

不过，还是有办法绕过它的。

首先创建两个文件：

一个托管非Prod的导入数组(默认)，内容如下

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() : []
];

另一个用于托管Prod内部版本的导入数组，内容如下

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 {}

完成了！下次在Prod模式下构建时，将不再包括StoreDevols模块(节省约4KB)

NgRx文档在hidden spot中具有与上述问题的评论相同的解决方案

这篇关于为什么我的生产捆绑包中有StoreDevols模块，以及如何从那里删除它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！