Angular2通过YSlow实施性能建议

时间:2017-03-19 10:05:26

标签: angular yslow

我经常使用YSlow和谷歌的页面速度来对我的网站进行一些基本的性能检查。 我是Angular2的新手,最近一直在研究Angular2项目,我在Angular2应用程序上运行了YSlow和PageSpeed测试。

PageSpeed没有运行,YSlow提出了一些改进建议。根据这些建议,我应该在以下js文件中添加expiry标头 -

$.ajax({
  type: "POST",
  url: "login-process.php",
  data: dataString,
  cache: true,
  beforeSend: function(){
    $('#loading-image').show();
  },
  complete: function(){
    $('#loading-image').hide();
  },
  success: function(html){
    $('.message').html(html).fadeIn(2000);
    setTimeout(function(){ window.location.replace("dashboard.php"); }, 2000);
  }
  statusCode: {
    404: function() {
      console.log('user not found');
    }
  }
});

在Angular2中执行此操作的最佳/最有效方法是什么?

另外,根据YSlow的另一个建议,我也应该压缩来自服务器的相同资源。当我使用Angular-CLI和ng-serve构建时,如何在本地计算机中启用压缩?

1 个答案:

答案 0 :(得分:1)

您关心的是服务器设置,而不是角度本身。当你ng serve时,根本不要这样做。这只会减慢你的发展速度。我在构建应用程序ng b -prod -aot的生产版本时进行测试,您可以在dist/文件夹中提供服务,以便在部署之前检查内容。

这是一种不影响CLI的简单方法

npm install --save-dev express compression connect-history-api-fallback

将此 express.js 添加到您的项目根目录:

var compression = require('compression');
var express = require('express');
var history = require('connect-history-api-fallback');


var app = express();

app.use(history());
app.use(compression());
app.use(express.static('dist'));

app.listen(4200, function () {
  console.log('\n', 'Serving "dist/" on http://localhost:4200. [Ctrl+C] to disconnect.');
});

并在使用node express.js进行构建后运行它以验证生产版本是否正常工作并查看正在执行的压缩。