Angular 5主JS包体积过大，应用加载耗时30秒求助

兄弟，我太懂你这种试遍社区方案还是压不下包体积的憋屈！针对你用的Angular 5版本，我给你梳理几个踩过坑后总结的实用优化点，说不定能帮你突破瓶颈：

• 统一Angular核心依赖版本：你package.json里@angular/animations是5.2.2，其他核心包都是5.0.1，版本不一致会导致打包工具无法合并重复代码，还会额外引入冗余模块！赶紧把所有Angular核心依赖统一到同一个稳定版本（比如Angular 5的最终稳定版5.2.11），这是很多人容易忽略的基础优化。

• 确保Tree Shaking完全生效：

  • 必须用ng build --prod打包，Angular 5的生产模式默认开启Tree Shaking，但要避免全量导入写法，比如别用import * as core from '@angular/core'，尽量按需导入单个成员：import { Component, OnInit } from '@angular/core'。
  • 排查第三方依赖是否支持ES模块格式，老的UMD格式依赖没法被Tree Shaking处理，能替换的尽量换成ES模块版本。

• 紧急上线路由懒加载：如果还没做懒加载，这是最立竿见影的优化！把非首屏必需的功能模块拆成懒加载路由，示例代码：

  const routes: Routes = [
    { 
      path: 'user-center', 
      loadChildren: './user-center/user-center.module#UserCenterModule' 
    }
  ];
  

  这样主包只会包含首屏核心代码，其他模块会拆分成独立chunk，用户需要时才加载。

• 用工具定位体积大户：

  • 执行ng build --prod --stats-json生成打包统计文件，然后安装webpack-bundle-analyzer，运行webpack-bundle-analyzer dist/stats.json就能直观看到每个模块的体积占比，揪出那些你没用到却占了大量空间的依赖。
  • 检查AppModule里是否导入了未使用的Angular模块，比如明明只用了响应式表单，却导入了FormsModule；或者不需要动画却导入了BrowserAnimationsModule，换成NoopAnimationsModule能省不少体积。

• 优化第三方依赖引入方式：

  • 比如用lodash的话，别全量导入import _ from 'lodash'，改成按需导入单个方法：import debounce from 'lodash/debounce'，或者直接用lodash-es版本，天生支持Tree Shaking。
  • 如果用了UI组件库，尽量只导入用到的组件，而不是全量导入整个库（比如某些老UI库的全量导入会把所有组件都打包进去）。

• 确认AOT编译已开启：Angular 5的ng build --prod默认会启用AOT编译，但如果之前手动配置关闭了，一定要打开！AOT会提前编译模板，移除运行时编译器的体积，同时也能让Tree Shaking更彻底。

这些都是针对Angular 5版本的针对性优化，你可以逐个排查调整，应该能看到主包体积的明显下降。

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