为什么 StoreDevtoolsModule 在我的生产包中,以及如何从那里删除它?
Why is StoreDevtoolsModule in my production bundle, and how to remove it from there?
使用 webpack-bundle-analyzer 我在我的生产包中检测到模块 StoreDevtoolsModule。
我虽然 three shaking 会删除它,但它没有...
有没有办法在没有它的情况下在生产模式下构建? (无论如何在生产中都不使用):
(....)
// \/ this one
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
(....),
!environment.production ? StoreDevtoolsModule.instrument() : [],
(....),
],
})
export class AppModule {}
在与同行讨论这个问题后,我们认为它在 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 中根据对上述问题的评论
提供了相同的解决方案
使用 webpack-bundle-analyzer 我在我的生产包中检测到模块 StoreDevtoolsModule。
我虽然 three shaking 会删除它,但它没有...
有没有办法在没有它的情况下在生产模式下构建? (无论如何在生产中都不使用):
(....)
// \/ this one
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
(....),
!environment.production ? StoreDevtoolsModule.instrument() : [],
(....),
],
})
export class AppModule {}
在与同行讨论这个问题后,我们认为它在 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 中根据对上述问题的评论
提供了相同的解决方案