tree-shaking

问题 We are currently trying to optimize a complex angular application (performance & bundle size). We found that we have partially unused components, but we are not 100% sure about them. Anyway ... The question we are currently asking is how exactly does tree shaking work in Angular. Question 1) If there are entries inside the declarations, imports or providers array of a module, but the module is not used anywhere, are they also removed with tree shaking or are they included in the final bundle?

问题 We are currently trying to optimize a complex angular application (performance & bundle size). We found that we have partially unused components, but we are not 100% sure about them. Anyway ... The question we are currently asking is how exactly does tree shaking work in Angular. Question 1) If there are entries inside the declarations, imports or providers array of a module, but the module is not used anywhere, are they also removed with tree shaking or are they included in the final bundle?

问题 Tree shaking in Angular 10 is 'shaking' out my AsyncPipe. The release notes blog entry for Angular 10 introduces a new --strict mode for ng new : One thing this does is: Configures your app as side-effect free to enable more advanced tree-shaking The official documentation says: When you create projects and workspaces using the strict mode, you'll notice an additional package.json file, located in src/app/ directory. This file informs tools and bundlers that the code under this directory is

问题 Context In an Angular 9 project, I am working with two environments: production & mock . In the Core Module, I check for mock environment. If build is made with mock configuration I inject mocked services that return mocked data, so no external http requests are made. If build is made with prod configuration, real services are injected. I do it like this: core.module.ts @NgModule({ declarations: [], providers: [], imports: [BrowserModule, HttpClientModule], exports: [], }) export class

问题 Context In an Angular 9 project, I am working with two environments: production & mock . In the Core Module, I check for mock environment. If build is made with mock configuration I inject mocked services that return mocked data, so no external http requests are made. If build is made with prod configuration, real services are injected. I do it like this: core.module.ts @NgModule({ declarations: [], providers: [], imports: [BrowserModule, HttpClientModule], exports: [], }) export class

问题 Here is an example repository that shows an example of the issue reported in this thread: https://github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md I'm trying to understand what's the effect of using a Barrel file to export functions and classes from a library project when importing it into another project that use webpack and should be able to treeshake the bundle. Imagine I have a project: library index.ts libA.ts libB.ts index.ts has this code: export { LibAMain } from 'LibA'

问题 I am using Angular CLI to build an app for production using the --prod switch. The bundle is created in the dist directory. Is there a way to know which classes and functions have been actually put in the bundle after tree-shacking and all other steps? 回答1: You can use webpack-bundle-analyzer to inspect your bundles. npm install webpack-bundle-analyzer --save-dev modify your package.json scripts section with "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

问题 I am using Angular CLI to build an app for production using the --prod switch. The bundle is created in the dist directory. Is there a way to know which classes and functions have been actually put in the bundle after tree-shacking and all other steps? 回答1: You can use webpack-bundle-analyzer to inspect your bundles. npm install webpack-bundle-analyzer --save-dev modify your package.json scripts section with "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

问题 I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those. There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd

问题 I assume the question at Angular-cli tree-shaking exclude component from removal is very similar but I can't seem to get anything out of it. Essentially I have a dynamic component factory as described in How can I use/create dynamic template to compile dynamic Component with Angular 2.0?. When I build it using the latest Angular CLI with a non-production setting, it all works fine. However, once I use the production setting I get the following error trace in the browser immediately when