我想使我的angular-cli应用程序更快!
是的,所以我花了几天的时间来更新我的NG2应用程序以使其与angular-cli一起使用。起初这是一个令人沮丧的经历,但是,我确实看到了曙光,并享受着开发过程。显然,在框架中已经进行了艰苦的工作和思考。
但我的申请很慢:
根据Pingdom的说法,我的应用程序比Internet上所有其他站点的21%快。公平地说,这是开箱即用的 ng build ,我敢肯定我可以大大加快这一步。
我的最后一个问题是:如何从根本上减少 Angular 网站的大小?
就目前而言,我的应用程序要花7秒钟才能加载(如果您住在纽约),所以我相信大多数人会在有机会加载之前继续前进。
显然,我需要踏上一条从根本上提高应用程序速度的旅程,但是我需要您的帮助! (因为我不知道自己在做什么:)
什么是标准做法,我什至从哪里开始整理呢?
进展:
提出建议后,我将在此处进行更新。
1. @cyrix建议的生产就绪构建:ng build -prod
Zip文件下降了超过一兆,Pingdom的新统计数据与原始统计数据相比有了很大的改进:
2.建议缩小图像尺寸。
有些图像比原先的图像要大一些,因此已缩小尺寸。然而,这并不是一个重大的改进,统计数据将站点提升到了站点的前73%,加载时间略短。
3. @yurzui建议使用gzip压缩,因此已启用此功能。显然,它可以正常工作,并且文件总大小减少了一半以上(609字节),但是在Pingdom上没有显示。我注意到,成绩有所提高。
我使用this site来检查压缩情况,并且this site向我展示了如何进行压缩,因为从管理中启用Cpanel似乎无法正常工作。该站点似乎也是gzip compression的良好资源。
4 @Yuruzi建议实现浏览器缓存。所以我做到了!
真正有趣的是性能等级的提高,真是太棒了!加载时间快一点,该网站现在排名前74%。根据Yuruzi的建议,我使用this post进行指导。
5感谢#angularjs channel 上的@ wafflej0ck。看来我需要改进GZip,方法是将其更改为here所示的压缩类型为“AddOutputFilterByType DEFLATE *”。
这似乎使该站点更加繁忙:
6建议使用AOT,所以我从this post中取出了一页。
我浏览了大多数文档,但是,我遇到了很多错误,因此决定将其留待以后再讨论,希望当AOT更加稳定时。
我在GitHub上阅读到,Angular-Cli预先安装了AOT,并且上面的文章没有意义。我不确定这是多么真实,但是我在编译代码时正在运行以下命令: ng build --prod --aot
7.调整了htaccess文件中的mod_expires.c。
性能等级已显着提高到98%,加载时间现在不到一秒钟,并且该网站的速度超过了所测试网站的91%。
该文件当前如下所示:
有效期至
过期默认为“访问权限加上2天”
ExpiresByType图片/ x图标“访问权限加上1年”
ExpiresByType图片/ jpeg“访问权限加1年”
ExpiresByType图片/ jpg“访问权限加1年”
ExpiresByType image / png“访问权限加1年”
ExpiresByType图片/ gif“访问权限加1年”
ExpiresByType应用程序/ x-shockwave-flash“访问权限加1个月”
ExpiresByType文本/ css“访问权限加上1个月”
ExpiresByType文本/ javascript“访问权限加1个月”
ExpiresByType应用程序/ pdf“访问权限加上1个月”
ExpiresByType应用程序/ javascript“访问权限加1周”
ExpiresByType应用程序/ x-javascript“访问权限加1周”
ExpiresByType文字/ javascript“访问权限加1周”
ExpiresByType文本/ html“访问加上600秒”
ExpiresByType应用程序/ xhtml + xml“访问加上600秒”
在这一点上,我不禁要以为我现在正在处理 yield 递减问题。
加载时间减少了,站点性能现在达到了100%
我注意到大量的加载时间归因于DNS和SSL。为了解决这个问题,我注册了一个免费的CloudFlare帐户,因为他们到处都有节点,这势必会加快一些工作...
确实如此。令人遗憾的是,PingDom的纽约主持人已被删除,但达拉斯的统计数据看起来很有希望将加载时间缩短到不到一秒钟!
其他好文章
This guy也有一篇关于优化 Angular 站点的好文章
最佳答案
有一些事情可以让您提高应用程序的速度,其中包括:
从2019年开始:提前(AOT)编译在默认情况下启用了
ng build --prod
选项。