Angular2 Implementing Performance Suggestion By YSlow

Question

I regularly use YSlow and google's pagespeed to do some basic performance checks of my website. I am new to Angular2 and recently have been working on an Angular2 project, I ran the YSlow and PageSpeed test on my Angular2 application.

PageSpeed did not run and YSlow gave a few suggestions to improve. As per these suggestions, I should add expiry header on the following js files -

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

What is the best/most efficient way of doing this in Angular2?

Also, as per another suggestion from YSlow I should also compress the same above resources coming from the server. How to enable compression in my local machine when I am using Angular-CLI and ng-serve to build?

Answer 1

Your concerns are about server setup, not the angular itself. Simply don't do them when you ng serve. It will just slow down your development. I do my tests when I build production version of an app ng b -prod -aot, and you can serve from dist/ folder to check stuff before deploying.

Here's simple way that doesn't affect CLI

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

add this express.js to your project root:

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.');
});

and run it after build with node express.js to verify production version is working and see compression in action.