Angular2 通过 YSlow 实现性能建议

Question

我经常使用 YSlow 和 google 的 pagespeed 对我的网站进行一些基本的性能检查。我是 Angular2 的新手，最近一直在从事 Angular2 项目，我运行在我的 Angular2 应用程序上进行了 YSlow 和 PageSpeed 测试。

PageSpeed 没有运行，YSlow 给出了一些改进建议。根据这些建议，我应该在以下 js 文件上添加到期时间 header -

inline.bundle.js  
styles.bundle.js  
main.bundle.js  
vendor.bundle.js

在 Angular2 中 best/most 执行此操作的有效方法是什么？

此外，根据 YSlow 的另一个建议，我还应该压缩来自服务器的上述相同资源。当我使用 Angular-CLI 和 ng-serve 构建时，如何在我的本地机器上启用压缩？

Answer 1

您担心的是服务器设置，而不是 angular 本身。当你 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 构建后验证生产版本是否正常工作并查看压缩操作。

Angular2 通过 YSlow 实现性能建议

Angular2 Implementing Performance Suggestion By YSlow

yslow

angular