Angular 优化指南

版本说明

1. 使用 angular 7.2.0

使用工具检测性能问题

1. Chrome 浏览器，开发者工具
   • 强烈推荐 Performance 工具，非常复杂和详细
   • 如何使用 Chrome performance
2. source-map-explorer

angular 问题总结

1. 页面和组件多，导致访问速度很慢
2. 打开页面后，显示数据也非常卡顿
3. 开发模式下，从修改到页面刷新，再到页面完全展示，这一过程太慢，严重影响开发速度

angular 优化建议

1. 将页面组件按功能分类，使用懒加载的方式加入路由树中

   • 原先 {path: "/index", component: IndexComponent}
   • 改成 {path: "/index", loadChildren: "./index/index.module#IndexModule"}
   • 懒加载在webpack打包时，将程序按照 module 为单位分开打包，当前端页面访问该页面时，再访问该module 的 js文件，通过缩小main.js使得页面访问的速度加快

2. 部署生产的时候，使用 --prod 和 --optimization 参数

   • prod 参数能够搜索js 文件所依赖的库，仅将该库和源代码进行打包，不打包未使用的包
   • optimization 实际上就是把空格和换行全部删除，整个文件只有一行，文件大小大大缩小

3. 对 angular ，UI 组件库，HTTP 组件库 使用CDN 的方式加载，再次缩小main.js 的大小

   • 该方式的优势在于，以前所有的库都在 main.js 中，只有 main.js 通过网络加载完毕之后，才会开始渲染，这时候，时间就是，网络加载时间 + 渲染时间
   • 如果使用 CDN 的方式，多个组件库会并行加载，并行渲染，出现页面的速度会大大缩减

4. nginx, tomcat 使用 gzip 压缩