logo标签列表

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

angularangular-cli
62

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

enter image description here

我花了几天时间更新我的NG2应用程序，使其能够与angular-cli配合使用。起初这是一次相当令人沮丧的经历，不过现在我真正看到了曙光，并且享受开发过程。显然，该框架已经付出了大量的努力和思考。

但是我的应用程序很慢：

根据Pingdom的数据，我的应用程序比互联网上其他21％的站点更快。公正地说，这是一个默认的ng build，我确信我可以显著提高它的速度。

Play Online Poker

我的最终问题是：如何彻底减小 angular 网站的大小？

目前为止，我的应用程序在纽约需要花费7秒钟才能加载，所以我相信大多数人在它有机会加载之前已经离开了。

显然，我需要着手大幅提高应用程序的速度，但我需要你的帮助！（因为我不知道该怎么做 :)

什么是标准做法，我该从哪里开始解决这个问题？

进展：

随着提出的建议，我将在此处进行更新。

1. @cyrix 建议使用生产就绪构建：ng build -prod

生成的Zip文件大小减少了 1MB 左右，从Pingdom的新统计数据可以看出，改进效果相当明显：

enter image description here

2. 建议缩小图像大小。

一些图像比它们本来应该的尺寸还要大一些，所以这些图像已经被缩小了。虽然改进不太明显，但是该网站的统计数据升级到了加载时间稍微更快的站点的前73％。

enter image description here

3. @yurzui建议使用gzip压缩，因此我已经启用了它。显然，它正在工作，文件总大小已经减少了一半以上（609字节），但这并未显示在Pingdom上。尽管我注意到等级有所提高。

我使用了这个网站来检查压缩率，这个网站向我展示了如何实现它，因为从管理界面启用时Cpanel似乎不起作用。 这个网站还似乎是一个很好的gzip压缩资源。

输入图像描述

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

真正有趣的是性能得分的提高，太棒了！加载时间稍微快了一点，现在网站排名前74％。根据Yuruzi的建议，我使用了这篇文章作为指南。

输入图像描述

5 感谢#angularjs频道中的@wafflej0ck。似乎我需要改善GZip，因此我通过更改“AddOutputFilterByType DEFLATE *”类型的压缩来完成了这一点，如这里所述。

这似乎已经大大提升了网站的性能：

输入图像描述

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 "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 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds"

输入图像描述

此时，我不能不认为我正在面临递减回报。

  1. 删除未使用的字体和图片

加载时间已降低，网站性能现在已达到100％。

输入图像描述

  1. DNS和SSL慢

我注意到很多加载时间都是由于DNS和SSL。为了解决这个问题，我注册了一个免费的CloudFlare账户，因为他们几乎无处不在，这肯定会加快一些事情...

事实证明，它确实做到了。不幸的是，PingDom中的纽约主机已被删除，但来自达拉斯的统计数据看起来非常有前途，将加载时间降至少于1秒！

输入图像描述

其他好的文章

这篇文章讲述了优化angular网站的好方法

首先，你的应用程序没有在生产模式下运行。你还应该使用像UglifyJS、AoT和CSSNano这样的工具（尝试使用ng build --prod）。 - cyr_x
我同意这不是生产模式 http://take.ms/c49Rh 你可以查看文档 https://github.com/angular/angular-cli/blob/master/docs/documentation/build.md ng serve --prod 还会使用代码压缩和树摇功能。自 beta28 以来，--aot 在 --prod 中默认为 true。 - yurzui
哇，只是使用--prod标志运行，就减少了4秒的加载时间。页面大小已经缩小到1.3MB...太不可思议了。 - HappyCoder
然后尝试启用gzip压缩。 - yurzui
启用浏览器缓存 https://dev59.com/plnUa4cB1Zd3GeqPdLiO - yurzui
显示剩余6条评论
2个回答
7

有一些方法可以帮助您加速应用程序，其中包括：

  1. 尽可能地使用模块的惰性加载 (链接)
  2. 使用生产环境配置文件构建项目
  3. 使用Ahead of Time (AOT)编译 (链接)
  4. 使用Angular-Universal，可以将部分项目渲染移动到服务器端

截至2019年：ng build --prod选项默认启用Ahead of Time (AOT)编译。

对AOT有些困惑。尝试了你建议的链接，但最终导致应用程序崩溃。Github上的一篇帖子建议使用--aot标志编译代码：ng build --prod --aot。你对此有什么建议或见解吗？谢谢。 - HappyCoder
4

如果您对我使用的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
您可以将此代码放置在位于index.html所在的项目根目录的.htaccess文件中。 - Gauravbhai Daxini
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接