Front end optimizations

Angular

• AOT
• lazy loading

Angular CLI

Brotli compression

• https://gist.github.com/aldo-roman/2c437b872b4550bd3f224fec2eaaebb1

var brotli = require('brotli');
var fs = require('fs');

var brotliSettings = {
  extension: 'br',
  skipLarger: true,
  mode: 1,
  quality: 10,
  lgwin: 12, // default
};

fs.readdirSync('dist/').forEach(function(file) {
  if (file.endsWith('.js') || file.endsWith('.css') || file.endsWith('.html')) {
    var result = brotli.compress(fs.readFileSync('dist/' + file), brotliSettings);
    fs.writeFileSync('dist/' + file + '.br', result);
  }
});

{
  /* ... */
  "scripts": {
    "build-prod": "ng build --prod && node compress.js"
  }
  /* ... */
}

Style-sheet:

• move font importing to index.html

index.html:

• fonts and style sheets should be imported here, otherwise the downloading starts after the CSS style sheet is retrieved
• fonts should be optimized and retrieved only for the font-weight that is actually used