feat(service-worker): minify SW script (+ sourcemaps)

[gkalpak]

Currently, the SW script generated by @angular/service-worker is unminified. This was intentional so that it was easier to debug and the stack traces (that people having issues might provide) would be easier to interpret. This is not a major concern, since the SW scripts are aggressively cached by the browser and downloaded/parsed/executed out-of-band with page rendering.

Nonetheless, now that the SW is more stable, it may make sense to minify it for production (with sourcemaps for debugging).

(Related/Duplicate issue: angular/angular-cli#11538)

[muuvmuuv]

Would love to see this in the next release. I have set up a minifier myself for some files:

• index.html
• ngsw-worker.js
• worker-basic.min.js (.min but isn't minified ^^)
• safety-worker.js (same content as worker-basic?)
• manifest.webmanifest
• ngsw.json

Minify code

const htmlMinifier = require('html-minifier-terser').minify
const jsMinifier = require('terser').minify

function minifyHtml(contents) {
  return htmlMinifier(contents, {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    decodeEntities: true,
    includeAutoGeneratedTags: false,
    minifyCSS: true,
    minifyJS: true,
    minifyURLs: true,
    processScripts: ['text/html'],
    removeAttributeQuotes: true,
    removeComments: true,
    removeOptionalTags: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    trimCustomFragments: true,
    useShortDoctype: true,
  })
}

function minifyJs(contents) {
  return jsMinifier(contents, {
    keep_classnames: true,
    keep_fnames: true,
    output: {
      comments: '',
    },
  }).code
}

function minifyJson(contents) {
  if (contents.$schema) {
    // $schema is only needed for autocompletion
    delete contents.$schema
  }
  return JSON.stringify(contents)
}

[blasco]

I'm struggling creating my own minification script. I was traying to use the cli version of terser, but --compress and --mangle seem to break the code. Could you give an example on how to use you minifying script @muuvmuuv ?

[muuvmuuv]

@blasco I have created a NodeJs script that gets the above files contents, uses the above minifier and overrides them. I will post my script tomorrow but it is pretty complex.

[muuvmuuv]

@blasco

NodeJS script to minify files post build:

#!/usr/bin/env node

const fs = require('fs')
const path = require('path')
const { cyan, dim, green, red } = require('kleur')

const { projectRoot, minifyHtml, minifyJs, minifyJson } = require('./utils')
const dist = path.join(projectRoot, 'dist', 'aqua')

const input = {
  html: ['index.html'],
  js: ['ngsw-worker.js', 'worker-basic.min.js', 'safety-worker.js'],
  json: ['manifest.webmanifest', 'ngsw.json'],
}

function minify(file, ext) {
  const filePath = path.join(dist, file)
  let minified,
    contents = ''

  try {
    contents = fs.readFileSync(filePath, { encoding: 'utf-8' })
  } catch (error) {
    console.log(red('File not found ' + filePath))
    return
  }

  switch (ext) {
    case 'html':
      minified = minifyHtml(contents)
      break
    case 'js':
      minified = minifyJs(contents)
      break
    case 'json':
      minified = minifyJson(JSON.parse(contents))
      break
    default:
      throw new Error('Unknown extension: ' + ext)
  }

  fs.writeFileSync(filePath, minified)
}

console.log(cyan('Minifying files...'))

Object.entries(input).forEach(([ext, files]) => {
  files.forEach((file) => {
    console.log(dim('> File ' + file))
    minify(file, ext)
  })
})

console.log(green('Done!'))

In package json:

    "build": "run-s build:*",
    "build:ng": "ng build --prod",
    "build:min": "node scripts/minify.js",

[tomdev9]

@muuvmuuv can u add method from ./utils ? to run your minify.js cript ? thanks

[muuvmuuv]

Here you go @tomastalian : https://gist.github.com/muuvmuuv/3f8fae0c12cc0859195c1be981c88a19