angular-cli 是否会删除未使用的模块,即使它是在 app.module 中导入的并且不使用它?
Will angular-cli removes unused modules even if it is imported in app.module and not use it?
我在 angular cli 的死代码 elimination/tree shaking 中几乎不需要澄清。
我打算使用 ngZorro ui 库。根据文档,我需要在我的 app.module 文件中导入 NgZorroAntdModule。它包含它提供的所有组件。现在,如果我只使用其中的一些,angular cli 是否仍会在我的最终产品 build.
中捆绑所有组件
我尝试单独导入我需要的模块uire,它有效,但我仍然想知道 angular cli 的树 shaking/dead 代码消除是否删除未使用的模块甚至尽管它是在 app.module.
中导入的
下面是我检查过的类似内容。
我在 app.module.ts 中包含以下 Material 个模块
但我只使用 mat-raised-button 它是我代码中 MatButtonModule 的一部分。
这是我使用 source-map-explorer 分析时在 main 包中得到的
Though i included Menu, Toolbar, Icon and FormField Modules in my
app.module.ts, since i am not using them in the code they aren't
included in webpack bundle.
这是我使用的构建配置 -
ng build --prod --build-optimizer --vendor-chunk --progress
--output-hashing=all --stats-json --source-map=true
您可以在生成包后对其进行分析,以使用以下工具查看包中包含的模块:
webpack-bundle-analyzer, source-map-explorer.
- 您需要生成stats.json文件,然后您可以使用webpack-bundle-analyzer[=48进行分析=]
- 对于 source-map-explorer 您需要使用
--source-map=true
生成产品版本
构建包的优化还取决于您用于产品构建的标志。
有关您可以使用的标志的详细信息,请参阅 Angular Build Documentation。
Tree-shaking 只能与以构建优化器可以删除未使用代码的方式构建的库一起使用。
在 v5.5 之前不支持 tree-shaking 的 RxJS 就是这种情况
NG-Zorro 只有一个导入模块(适用于所有组件),但它现在支持 tree-shaking,因为 1.x
我在 angular cli 的死代码 elimination/tree shaking 中几乎不需要澄清。
我打算使用 ngZorro ui 库。根据文档,我需要在我的 app.module 文件中导入 NgZorroAntdModule。它包含它提供的所有组件。现在,如果我只使用其中的一些,angular cli 是否仍会在我的最终产品 build.
中捆绑所有组件我尝试单独导入我需要的模块uire,它有效,但我仍然想知道 angular cli 的树 shaking/dead 代码消除是否删除未使用的模块甚至尽管它是在 app.module.
中导入的下面是我检查过的类似内容。
我在 app.module.ts 中包含以下 Material 个模块
这是我使用 source-map-explorer 分析时在 main 包中得到的
Though i included Menu, Toolbar, Icon and FormField Modules in my app.module.ts, since i am not using them in the code they aren't included in webpack bundle.
这是我使用的构建配置 -
ng build --prod --build-optimizer --vendor-chunk --progress --output-hashing=all --stats-json --source-map=true
您可以在生成包后对其进行分析,以使用以下工具查看包中包含的模块:
webpack-bundle-analyzer, source-map-explorer.
- 您需要生成stats.json文件,然后您可以使用webpack-bundle-analyzer[=48进行分析=]
- 对于 source-map-explorer 您需要使用
--source-map=true
生成产品版本
构建包的优化还取决于您用于产品构建的标志。
有关您可以使用的标志的详细信息,请参阅 Angular Build Documentation。
Tree-shaking 只能与以构建优化器可以删除未使用代码的方式构建的库一起使用。
在 v5.5 之前不支持 tree-shaking 的 RxJS 就是这种情况
NG-Zorro 只有一个导入模块(适用于所有组件),但它现在支持 tree-shaking,因为 1.x