Angular4 AOT编译后vendor/main.js及bundle体积过大，如何优化提升加载速度？

嘿，我之前在维护Angular 4项目时也踩过AOT编译后包体积过大、加载慢的坑，折腾了不少时间总结出这些实用的优化方案，你可以一步步来试试：

1. 先拉满生产模式的基础优化 #

这是最基础但最有效的一步，Angular CLI的生产构建命令会自动帮你开启一堆核心优化：

ng build --prod

这个命令默认包含：

• 强化版AOT编译（进一步精简元数据和冗余代码）
• Tree Shaking（自动移除项目中未被引用的代码）
• UglifyJS压缩与代码混淆（把变量名变短、删掉注释空格）
• 移除Angular调试信息（比如ng.probe这类开发工具代码）
• 启用Build Optimizer（专门针对Angular代码的深层优化）

如果是手动配置Webpack的项目，要确保：

• 引入UglifyJsPlugin并开启mangle和compress选项
• 设置mode: 'production'
• 启用ModuleConcatenationPlugin提升打包效率

2. 用好Tree Shaking，砍掉冗余代码 #

Tree Shaking能帮你精准移除无用代码，但要确保它能正常工作：

• 全程用ES6模块语法（import/export），别用CommonJS的require——Tree Shaking只对ES模块生效
• 引入第三方库时只拿需要的部分，比如：

  // 正确：只导入Observable
  import { Observable } from 'rxjs/Observable';
  // 错误：导入整个rxjs库，体积直接翻倍
  import * as rxjs from 'rxjs';
  

• 优先选支持ES6模块的第三方库，比如用lodash-es代替普通lodash，这样Tree Shaking才能摇掉未使用的工具函数

3. 代码分割：把大拆小，按需加载 #

这是优化加载速度的核心，把单一超大bundle拆成多个小chunk，用户只加载当前页面需要的代码：

• 路由懒加载：在Angular路由配置中用loadChildren实现模块按需加载，比如：

  const routes: Routes = [
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'profile', loadChildren: './profile/profile.module#ProfileModule' }
  ];
  

• 拆分Vendor包：如果用Webpack，配置splitChunks把第三方依赖拆成独立chunk，比如把Angular核心库、RxJS、工具库分开打包，避免一个几百KB的vendor.js

4. 换掉体积大户，优化第三方依赖 #

很多时候包体积爆炸都是因为引入了没必要的重库：

• 替换臃肿库：比如用date-fns（按需导入）代替体积超大的moment.js；用axios代替某些冗余的HTTP库
• 用工具定位问题：用webpack-bundle-analyzer生成可视化包结构，找出体积最大的模块，看看有没有替换或移除的空间
• 选轻量替代方案：如果只需要简单的表单验证，没必要引入完整的表单库，自己写基础逻辑或者用轻量库就行

5. 用Bundle Analyzer精准定位冗余 #

想要精准优化，得先知道包里面藏了什么：

1. 生成构建统计文件：

   ng build --prod --stats-json
   

2. 安装并运行分析工具：

   npm install -g webpack-bundle-analyzer
   webpack-bundle-analyzer dist/stats.json
   

打开后会看到一个交互式饼图，清晰显示哪些文件占了大部分体积，针对性优化就行

6. 服务器端开启压缩（Gzip/Brotli） #

这一步不用改代码，但能让传输的文件体积减小70%左右，效果立竿见影：

• 用Nginx的话，在配置文件中开启Gzip：

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

• 更推荐Brotli压缩，比Gzip压缩率更高，主流服务器和浏览器都支持

7. 清理项目里的冗余垃圾 #

• 删除项目中未使用的组件、指令、服务和模板
• 压缩静态资源：图片用TinyPNG等工具压缩，优先用WebP格式
• 精简polyfill：Angular CLI默认加了很多兼容旧浏览器的polyfill，如果只支持现代浏览器，可以删掉不必要的部分

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