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

Question

我想让我的 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 频道上的@wafflej0ck。看来我需要改进 GZip，我已经通过更改为“AddOutputFilterByType DEFLATE *”类型的压缩来完成here。

这似乎使网站变得更加强大：

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

我浏览了大部分文档，但是，我遇到了很多错误，并决定将其留到以后，希望 AOT 更稳定一些。

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

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

性能等级已显着提高至 98%，加载时间现在不到一秒，网站速度超过 91% 的测试网站。

文件目前如下所示：

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

此时我不禁认为我现在正在处理收益递减问题。

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

加载时间已缩短，网站性能现在为 100%

9. DNS 和 SSL 速度慢

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

确实如此。遗憾的是，PingDom 的纽约主机已被删除，但达拉斯的统计数据看起来很有希望将加载时间降至一秒以下！

其他好文章

This guy 也有一篇关于优化 Angular 网站的好文章

Answer 1

有一些事情可以让您提高应用程序的速度，其中包括：

1. 尽可能使用延迟加载模块 (link)
2. 使用生产配置文件构建项目
3. 使用提前 (AOT) 编译 (link)。
4. 使用Angular-Universal 可以将项目的部分渲染移至服务器端

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

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