首页 文章

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

提问于
浏览 次
3

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

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

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

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

enter image description here

enter image description here

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

  • Reduce server response time ：根据google，该页面服务时间约为3秒，但我猜大部分时间都花在预渲染上（调用本地prerender实例） . 这里显而易见的解决方案是缓存预渲染页面，但我感谢任何其他建议 .

  • Enable compression ：根据谷歌，样式文件（* .css）未压缩 . 如何激活压缩？我认为Apache上的某种过滤器应该能够胜任 . 有人为此配置好吗？

  • Eliminate render-blocking JavaScript and CSS in above-the-fold content ：报告说："None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML."阻塞资源是.css和字体，所以我真的不知道如何改进这一点 . 有什么建议吗？

  • Leverage browser caching ：报告说图像文件（.png，.svg等等）是可缓存的，但"expiration not specified" . 同样，我想我需要在Apache上添加某种过滤器，但是我总是害怕在发布新版本的角度应用程序时会发生什么：对此有什么好的配置？

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

enter image description here
建议的优化是：

  • Specify a Vary: Accept-Encoding header ：这里的解决方案应该是配置apache以添加Header Vary：Accept-Encoding到响应 . 根据我对Vary头的了解，它允许缓存，CDN或中间的其他服务器提供不同的缓存版本的资源，这些缓存版本依赖于浏览器请求的GZIP编码 . 是否有人知道此标头可能产生的任何副作用，例如我们的角度应用程序的新版本发布时？

  • Combine external JavaScript ：一些js用于外部跟踪工具，因此我们无法在这里做任何事情，但我们的角度应用程序（main.xxx.js，polyfills.xxx.js，runtime.xxx.js）提供了3个javascript . 如何在单个js中组合主题？

angular performance angular6 pagespeed

1 回答

  • 0

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

    Enable compression ：经过一些调查，这是我们在角度应用程序的 .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>

    Leverage browser caching ：因为我们正在使用 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>
    回复于

相关问题