Issue
Using webpack-bundle-analyzer I detected the module StoreDevtoolsModule into my production bundle.
I though three shaking would removed it, but it does not...
Is there a way to build in production mode without it? (it is not used anyway in production):
(....)
// \/ this one
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
(....),
!environment.production ? StoreDevtoolsModule.instrument() : [],
(....),
],
})
export class AppModule {}
Solution
After discussing the problem with my peers, we figured that the reason for it to be in the bundle is that because environment.production
is evaluated at runtime, tree shaking will not remove the module from the bundle. Event though it is not really used.
There is a way around it though.
first create 2 files:
one to host the import array for non-prod (default), with the following contents
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() : []
];
and the other to host the import array for prod builds, with the following contents
src/hat-trick/store-dev-tools-import.prod.ts :
export const storeDevToolsImport = [];
add a fileReplacements
section to your angular.json
file at the production build config:
"production": {
(....)
"fileReplacements": [
(....)
{
"replace": "src/hat-trick/store-dev-tools-import.ts",
"with": "src/hat-trick/store-dev-tools-import.prod.ts"
},
]
}
and finally, use the new variable storeDevToolsImport
in you module, instead of importing StoreDevtoolsModule
directly:
@NgModule({
imports: [
(....),
...storeDevToolsImport,
(....),
],
})
export class AppModule {}
And done! next time you build in prod mode, StoreDevtoolsModule will no longer be included (saving about 4kb)
NgRx docs have the same solution in a hidden spot as per comment on the question above
Answered By - The Fabio
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.