Question

我想让我的angular-cli应用更快！

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

但我的申请很慢：

根据Pingdom，我的申请速度超过互联网上所有其他网站的21％。公平地说，这是一个开箱即用的 ng build ，我相信我可以大大提高速度。

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

按照目前的情况，应用程序：fairplay.poker需要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频道上的@ wafflej0ck。看来我需要通过更改为＆＃34; AddOutputFilterByType DEFLATE *＆＃34;来改进我所做的GZip。概述here的压缩类型。

这似乎增加了网站：

6有人建议使用AOT，因此我从this post中取出了一页。

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

我在GitHub上读到Angular-Cli预先安装了AOT，上面的文章并不相关。我不确定这是多么真实但是我在编译代码时运行以下命令： ng build --prod --aot

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

性能等级显着提高到98％，加载时间现在不到一秒，网站比91％的测试网站快。

目前文件如下：

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

此时我无能为力，但我认为我现在正在处理收益递减的问题。

删除了css中包含的不需要的字体和未使用的图像。

加载时间已经下降，网站性能现在为100％

慢DNS和SSL

我注意到大量的加载时间是由于DNS和SSL造成的。为了解决这个问题，我注册了一个免费的CloudFlare帐户，因为它们几乎到处都有节点，这必然会加速一些事情......

确实有。可悲的是，来自PingDom的纽约主持人已被删除，但来自达拉斯的统计数据看起来非常有希望将负载时间降到一秒以下！

其他好文章

This guy有一篇关于优化角点的好文章

Answer 1

有一些东西可以让你提高你的应用程序的速度，其中包括：

尽可能使用延迟加载模块（link）
使用生产资料
使用提前（AOT）编译（link）
使用Angular-Universal可以将项目渲染的一部分移动到服务器端

Answer 2

对于那些对我正在使用的HTACCESS文件感兴趣的人，请点击此处。这会强制https减慢约100毫秒的速度：

#REDIRECT ROUTES TO INDEX (fixes broken routes with angular)
RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
#ENABLE GZIP COMPRESSION TO IMPROVE PERFORMANCE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# SET EXPIRE HEADERS TO IMPROVE PERFORMANCE
<ifModule mod_expires.c>
  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 "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/javascript "access plus 2 week"
  ExpiresByType application/x-javascript "access plus 2 week"
  ExpiresByType text/javascript "access plus 2 week"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

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

我想让我的angular-cli应用更快！

2 个答案: