Angular-cli: service workers files are not minified

[alan-agius4]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Area

- [X] devkit
- [ ] schematics

Versions

Angular CLI: 6.0.8
Node: 8.9.0
OS: win32 x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Repro steps

ng  generate serviceWorker --project my-app-ngsw
ng build --prod

Desired functionality

All JS files generated for the service workers are unminified (worker-basic.min, ngsw-worker.js and safety-worker.js). I'd suggest that these are minified.

[filipesilva]

@alxhub I think you had an opinion about this topic, can you chime in?

[alxhub]

Yes, I left the SW files unminified because

1) the SW is aggressively cached by the browser and downloaded out-of-band with page rendering, so file size is not a major concern.

2) in the event of issues in production, we get much better stack traces from an unminified SW.

That said, at some point it will make sense to minify the SW bundles.

[jraadt]

I feel that https://github.com/angular/angular/issues/21191 should be fixed before these files are minified.

[mboughaba]

@alxhub

in the event of issues in production, we get much better stack traces from an unminified SW.

ngsw-worker.js is at 136KB which quite large.
As minifying JS seems rather easy... Could you please explain which kind of stack loss one would expect?
I am asking this because I am considering to run a post build task to minify the file til we get a fix

That said, at some point it will make sense to minify the SW bundles.

Would it be possible to provide a target date?

[hc-codersatlas]

@alxhub we don't have to mangle it? For a quick fix can't we trim the spaces and strip the comments etc? This would make it considerably smaller and won't lose out with debugging.

[kmturley]

I managed to minify the workers using:
npm install webpack-cli --save-dev

webpack.workers.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    'ngsw-worker': './dist/ngsw-worker.js',
    'safety-worker': './dist/safety-worker.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].min.js'
  }
}

package.json

"build:workers": "webpack --config webpack.workers.js && rm ./dist/ngsw-worker.js && rm ./dist/safety-worker.js",

Then running:
npm run build && npm run build:workers

[nlappe]

i also think the ngsw.js should be mini- and uglified (i use the terser cli after ng build as a workaround, but out of the box would be nice). i stumbled upon it while aggressivly tuning first load perfomance on a page i work on. There are tons of non-license comments aswell. Doesnt make sense to deliver those in prodmode.

My tests have shown that you can achieve a reduction of about 60-70% (startetd with around 140k ended in around 50k - mini- & uglify, kept only licensing relevant Comments).

As the SW has to be delivered anyway, a minification would heavily improve the experience on low end devices and regions with slow connections. I'm thinking about emerging markets like India, Africa, etc.
Especially when connecting via HTTP/1.1 its a pain as it will occupy one of the 6 parallel connections without any benefit for the time to first interaction/paint.

i know i'm bit flipping here, but every 50ms we get for free is a piece of experience our users get for free aswell.

kind of offtopic: ngsw.json isnt minified aswell. minifying saves another bunch of kb - but i cant remember the numbers, i'd have to look them up from home after work.

[gkalpak]

BTW, minifying the SW scripts is tracked in angular/angular#27490.

[alan-agius4]

Closing in favour of angular/angular#27490.

[angular-automatic-lock-bot[bot]]

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._}