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?
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.