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

Question

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

我们设置了一个本地“ prerender”实例，以使搜索引擎可以爬网该网站，我们尝试了Angular Universal，但由于库兼容性问题很多，我们决定使用prerender解决方案。

然后，我们添加了google analytcs跟踪代码，并在收集了几天的数据后，运行了google PageSpeed Insights工具。

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

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

• 减少服务器响应时间：根据google的说法，该页面已投放 在大约3秒内，但我想大部分时间都花在了 预渲染（调用本地预渲染实例）。显而易见的解决方案 这是缓存预渲染的页面，但我感谢其他任何人 建议。
• 启用压缩：根据google，样式文件（* .css）为 不压缩。如何激活压缩？我认为某种 Apache上的filter可以完成这项工作。有谁的配置很好 为此吗？
• 彻底消除渲染阻止的JavaScript和CSS 内容：该报告说：“您的首屏内容均不包含 无需等待以下资源即可呈现页面 加载。尝试延迟或异步加载阻塞资源，或者 将这些资源的关键部分直接内嵌到 HTML。”阻止资源是.css和字体，所以我并不是真的 知道如何在这一点上改进。有什么建议吗？
• 利用浏览器缓存：报告称图像文件（.png， .svg等）是可缓存的，但“未指定到期时间”。再说一次 猜想我需要在Apache上添加某种过滤器，但是我总是害怕当我们发布新版本的angular应用程序时会发生什么：对此是否有合适的配置？

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

建议的优化方法是：

• 指定一个变量：Accept-Encoding标头：此处的解决方案应为 配置apache以添加Header Vary：Accept-Encoding到 响应。根据我对Vary标头的了解，它允许 缓存，CDN或其他中间服务器以服务于不同的缓存 在浏览器上使用的资源版本要求GZIP 编码与否。有谁知道此标头有任何副作用 可以拥有，例如当我们的角度应用程序有新版本时 被释放？
• 组合外部JavaScript ：一些js用于外部跟踪 工具，所以我们在这里无能为力，但是3个javascript是 由我们的角度应用程序（main.xxx.js，polyfills.xxx.js， runtime.xxx.js）。如何在单个js中组合主题？

Answer 1

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

启用压缩： 经过一番调查，这是我们在angular应用程序的.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>