angular前端性能优化

 

一、启动时间优化

打包文件

main. bundle .js是把所有模块自己编写的js都打包到一块；

vendor.bundle.js包含了angular的公共库。

优化： vendor.bundle.js

使用打包命令ng build --prod --aot 代替 ng build

--prod 代表生产环境编译，带有代码混淆与压缩功能。

--aot 代表预编译，会显著缩短客户端浏览器的启动到展示出真正页面的时间。

二、angular模块懒加载

优化： main.bundle.js

参考文章：

https://blog.csdn.net/xif3681/article/details/84584317

三、开启服务端GZIP压缩

Angular2最大的包就是vendor和main两个js文件，但好在是文本，压缩比例一般较大，开启服务端或者反向代理的GZIP压缩功能后，可以将js文件的下载体积进一步减小。

Nginx开启GZIP功能

要打开配置文件 nginx.conf找到gzip on 把前面的注释符号#去掉即可开启GZIP服务。然后配置GZIP即可。下面是一个相对优化不错的配置，DNSLA建议使用。

四、图片优化

图片压缩，懒加载，精灵图的使用