Angular 5应用AOT生产构建时出现无效属性名警告

Hey there! 从你贴出的ng build --prod --aot构建输出能看到，你的main.bundle.js（1.09 MB）和0.aa2387338203eacb7219.chunk.js（1.29 MB）都超过了Angular CLI默认的性能告警阈值（一般建议main bundle控制在1MB以内），这就是你收到警告的核心原因。下面给你几个实战性的优化方案，帮你快速缩小bundle体积：

1. 启用代码分割与懒加载 #

把非首屏必需的功能模块改成懒加载，Angular 5原生支持通过路由配置实现，这样能把大的bundle拆分成多个小chunk，只有当用户访问对应路由时才加载对应代码。示例配置如下：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  // 懒加载Dashboard模块
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
  { path: 'settings', loadChildren: './settings/settings.module#SettingsModule' }
];

2. 开启Build Optimizer并强化Tree Shaking #

Angular 5的build-optimizer能深度优化代码，移除无用的Angular装饰器、未使用的代码片段，配合--prod模式的Tree Shaking效果更好。修改构建命令为：

ng build --prod --aot --build-optimizer

3. 分析Bundle构成，精准优化 #

用source-map-explorer工具可视化查看bundle里的内容，找出体积大的文件或依赖：

• 首先安装工具：

  npm install -g source-map-explorer
  

• 带source map构建项目：

  ng build --prod --aot --source-map
  

• 分析main bundle：

  source-map-explorer dist/main.5eaed2e0f72790b03842.bundle.js
  

  通过这个工具你能直观看到哪些库或组件占了大头，比如是否引入了完整的lodash、moment.js这类大库，然后针对性替换或按需引入。

4. 优化第三方依赖 #

• 对于moment.js这类带多语言包的库，用moment-locales-webpack-plugin只保留你需要的语言包，避免打包所有语言文件；
• 用轻量化的替代库，比如用date-fns代替moment.js，用lodash-es配合按需引入代替完整的lodash；
• 考虑通过CDN加载部分常用库（如RxJS、Angular Core），减少本地bundle的体积。

5. 启用服务器端Gzip压缩 #

即使bundle体积没完全降到1MB以内，在服务器（Nginx、Apache等）开启Gzip压缩也能大幅减小传输到客户端的文件大小，实际加载速度会提升很多。以Nginx为例，在配置文件中添加：

gzip on;
gzip_types text/css application/javascript application/json;

如果你的styles.bundle.css体积也偏大，还可以考虑拆分样式文件、移除未使用的CSS代码（比如用PurgeCSS工具）来优化。

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