SharedModule导出未使用模块是否影响Angular应用性能？

首先明确你的场景：你封装了MaterialModule统一导入导出常用的Angular Material组件，再把它放进SharedModule供业务模块复用。但实际业务模块（比如ExampleModule）往往只用到其中某一个Material组件模块，却要导入整个SharedModule。这种做法在大型应用里对开发和生产模式的性能影响，咱们分情况说：

开发模式（JIT编译） #

开发阶段Angular用JIT即时编译，它不会做太多深度优化。只要你导入了某个模块，不管用不用里面的内容，都会把整个模块加载并编译进来。所以像ExampleModule这种只需要MdIconModule的模块，会间接把MdToolbarModule、MdSidenavModule这些没用到的模块也拉进来。

在大型应用里，这种情况多了之后：

• 本地构建时间会变长，因为要处理更多未使用的代码
• 页面启动速度变慢，浏览器要加载更多冗余资源，内存占用也会更高
• 热重载的响应速度会打折扣，整体开发体验受影响

生产模式（AOT编译） #

生产环境用AOT提前编译时，情况就不一样了。Angular的AOT编译器配合Webpack的**树摇（Tree Shaking）**机制，会深度分析你的代码依赖链，只保留实际被使用到的组件、模块和代码片段，完全剔除未使用的部分。

也就是说，哪怕你导入了整个MaterialModule，只要ExampleModule里只用到MdIconModule，最终打包后的生产代码里只会包含MdIconModule相关的内容，MdToolbarModule这些没用到的模块根本不会出现在最终的bundle里。不过这里有个前提：Angular Material本身是ES6模块格式，你的构建工具（比如Angular CLI默认的Webpack）支持树摇优化——这点Angular官方已经帮你做好了，不用额外配置。

给你的建议 #

1. 开发阶段优化体验：可以考虑拆分MaterialModule，比如按功能拆成MaterialIconModule、MaterialLayoutModule等细粒度模块，然后在SharedModule里按需导出，或者让业务模块直接导入需要的单个Material组件模块，避免加载多余代码，提升开发时的构建和启动速度。
2. 生产阶段保持好习惯：虽然AOT会帮你清理冗余代码，但按需导入的习惯还是要保持。一来能让代码依赖更清晰，二来可以避免某些极端情况（比如个别第三方库的代码结构不支持树摇）导致冗余代码残留。
3. 遵循官方最新实践：现在Angular Material官方更推荐直接在业务模块中导入单个组件模块，而不是创建统一的MaterialModule。这种方式更灵活，能精准控制每个模块的依赖，从根源上减少冗余加载。

你提供的代码示例 #

MaterialModule

import { NgModule } from '@angular/core'; 
import { MdToolbarModule, MdIconModule, MdSidenavModule } from '@angular/material'; 

@NgModule({ 
  imports: [ 
    MdToolbarModule, 
    MdIconModule, 
    MdSidenavModule, 
  ], 
  exports: [ 
    MdToolbarModule, 
    MdIconModule, 
    MdSidenavModule, 
  ], 
}) 
export class MaterialModule {} 

SharedModule

import { NgModule } from '@angular/core'; 
// Modules 
import { MaterialModule } from './material.module'; 

@NgModule({ 
  imports: [ 
    MaterialModule, 
  ], 
  declarations: [ 
    // components 
  ], 
  exports: [ 
    MaterialModule, 
    // components 
  ], 
  providers: [ 
    // utils 
  ] 
}) 
export class SharedModule {} 

内容的提问来源于stack exchange，提问作者jeanl