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

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)

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)
}

@muuvmuuv

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 ?

@blasco

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

@blasco

@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",

@muuvmuuv

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

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

With #63364 we've announced that the service-worker package in now in maintenance mode and will not receive feature PRs and feature requests.

The message is also visible here: https://angular.dev/ecosystem/service-workers

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

muuvmuuv commented on Jul 2, 2020

blasco commented on Jul 20, 2020

muuvmuuv commented on Jul 20, 2020

muuvmuuv commented on Jul 21, 2020

tomdev9 commented on Sep 10, 2020

muuvmuuv commented on Sep 10, 2020

JeanMeche commented on Aug 29, 2025

angular-automatic-lock-bot commented on Sep 29, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions