Angular2 实现 YSlow 的性能建议

Question

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

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

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

在 Angular2 中最好/最有效的方法是什么？

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

Answer 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 构建后运行它，以验证生产版本是否正常工作并查看压缩效果。