如何压缩和优化Angular2应用程序

Question

如何压缩和优化Angular2应用程序

Hap*_*der 55 angular-cli angular

我想让我的angular-cli应用程序更快!

是的,所以我花了几天时间更新我的NG2应用程序以使用angular-cli.起初这是一个非常令人沮丧的经历,然而,我真的看到了光明并享受着开发过程.显然,努力工作和思想已被纳入框架.

但我的申请很慢:

根据Pingdom的说法 ,我的应用程序比互联网上所有其他网站的21%快.公平地说,这是一个开箱即用的构建,我相信我可以大大提高速度.

我的最后一个问题是:如何从根本上减少角度网站的大小？

目前,应用程序:fairplay.poker需要7秒才能加载(如果你住在纽约),所以我相信大多数人都会在它有机会加载之前继续前进.

显然,我需要开始一个从根本上提高应用程序速度的旅程,但我需要你的帮助!(因为我不知道我在做什么:)

什么是标准练习,我在哪里开始排序？

进展:

作为建议,我将在这里更新它们.

1. @cyrix建议的生产就绪版本:ng build -prod

Zip文件下降超过一兆,而Pingdom的新统计数据与原始统计数据相比有了很大改进:

2.建议缩小图像尺寸.

有些图像比它们应该有的大一些,因此尺寸减小了.然而,这并不是一个重大改进,这些数据已经将网站提升到前73%的网站,加载时间略快一些.

3. @yurzui建议使用gzip压缩,所以我启用了这个.显然,它正在工作,总文件大小减少了一半以上(609字节),但这并没有显示在Pingdom上.不过我注意到等级有所改善.

我使用这个站点来检查压缩,这个站点向我展示了如何做到这一点,因为Cpanel似乎在从管理启用时不起作用.该站点似乎也是一个很好的gzip压缩资源.

4 @Yuruzi建议实现浏览器缓存.所以我做到了!

真正有趣的是性能等级的改进,那就是摇滚!加载时间快一点,现在该网站占据了74%的前列.根据Yuruzi的建议,我使用这篇文章作为指导.

5感谢#angularjs频道上的@ wafflej0ck.看来我需要提高我已经改变为概述"AddOutputFilterByType DEFLATE*"压缩类型来完成的GZip 这里.

这似乎增加了网站:

6有人建议使用AOT,因此我从这篇文章中删除了一页.

我浏览了大部分文档,然而,我遇到了一个错误的世界,并决定将其留待以后,希望当AOT更稳定时.

我在GitHub上看到Angular-Cli预装了AOT并且上面的文章没有关系.我不确定这是多么真实但是我在编译代码时运行以下命令:ng build --prod --aot

7.调整htaccess文件中的mod_expires.c.

性能等级已显着提高到98%,加载时间现在不到一秒,网站比测试网站的91%快.

该文件目前看起来像这样:

ExpiresActive On ExpiresDefault"access plus 2 days"ExpiresByType image/x-icon"access plus 1 year"ExpiresByType image/jpeg"access plus 1 year"ExpiresByType image/jpg"access plus 1 year"ExpiresByType image/png"access plus 1 year "ExpiresByType image/gif"访问加上1年"ExpiresByType应用程序/ x-shockwave-flash"访问加1个月"ExpiresByType text/css"访问加1个月"ExpiresByType text/javascript"访问加1个月"ExpiresByType application/pdf"访问加1个月"ExpiresByType应用程序/ javascript"访问加1周"ExpiresByType应用程序/ x-javascript"访问加1周"ExpiresByType文本/ javascript"访问加1周"ExpiresByType文本/ html"访问加600秒"ExpiresByType应用程序/ xhtml + xml"访问加600秒"