如何提高Angular 6.0应用程序的速度

Question

我们有一个基于角度6的全新应用程序，由apache 2.4提供服务。

我们设置了一个本地“prerender”实例来使网站被搜索引擎抓取，我们尝试了Angular Universal，但我们在库中兼容了很多问题，我们决定开始使用prerender解决方案。

然后我们添加了Google分析跟踪代码，经过几天的数据收集后，我们运行了Google PageSpeed Insights工具。

这是我们收到的PageSpeed Insights分数：

PageSpeed Insights工具收到的优化建议包括：

• 减少服务器响应时间：根据谷歌，该页面服务时间约为3秒，但我猜大部分时间都花在预呈现（调用本地prerender实例）上。这里显而易见的解决方案是缓存预渲染页面，但我感谢任何其他建议。
• 启用压缩：根据谷歌，样式文件（* .css）不会被压缩。如何激活压缩？我认为Apache上的某种过滤器应该能够胜任。有人为此配置好吗？
• 在报废内容中消除渲染阻止JavaScript和CSS：报告说：“无需等待以下资源加载即可呈现页面上的上述内容。尝试延迟或异步加载阻止资源，或直接在HTML中内联这些资源的关键部分。“阻塞资源是.css和字体，所以我真的不知道如何改进这一点。有什么建议吗？
• 利用浏览器缓存：报告称图像文件（.png，.svg等）是可缓存的，但“未指定过期”。同样，我想我需要在Apache上添加某种过滤器，但是我总是害怕在发布新版本的角度应用程序时会发生什么：对此有什么好的配置？

我们还使用https://tools.pingdom.com测试了站点速度，结果如下：

建议的优化是：

• 指定Vary：Accept-Encoding标头：这里的解决方案应该是配置apache以将Header Vary：Accept-Encoding添加到响应中。根据我对Vary头的了解，它允许缓存，CDN或中间的其他服务器提供不同的缓存版本的资源，这些缓存版本依赖于浏览器请求的GZIP编码。是否有人知道此标头可能产生的任何副作用，例如我们的角度应用程序的新版本发布时？
• 结合外部JavaScript：一些js用于外部跟踪工具，所以我们无法在这里做任何事情，但我们的角度应用程序（main.xxx.js，polyfills.xxx.js，runtime.xxx.js）提供了3个javascript。 。如何在单个js中组合主题？

Answer 1

过了一段时间，我们对应用程序进行了优化;这是我们到目前为止优化的内容，我希望它对其他人有用。

启用压缩：经过一些调查，这是我们在角度应用程序的.htaccess中添加的配置，用于设置HTML，CSS，JavaScript，Text，XML和字体的gzip压缩。

有关进一步的参考，请参阅https://httpd.apache.org/docs/2.4/mod/mod_deflate.html和https://gtmetrix.com/enable-gzip-compression.html。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

利用浏览器缓存：因为我们正在使用ng build --prod构建角度应用程序，所以使用缓存清除打包应用程序：文件名称类似于runtime.06daa30a2963fa413676.js，我们可以在静态资源上使用相当远的Expires头部这是添加到.htaccess的配置，使用mod_expires为HTTP响应添加一个很好的Expires头

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 6 month"
    ExpiresByType image/jpeg "access 6 month"
    ExpiresByType image/gif "access 6 month"
    ExpiresByType image/png "access 6 month"
    ExpiresByType image/svg+xml "access 6 month"
    ExpiresByType text/css "access 6 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType image/x-icon "access 6 month"
    ExpiresDefault "access 1 month"
</IfModule>