Web workers used in lazy loaded modules are included in initial bundle causing the initial bundle size to increase.

[vajahath]

Bug Report

Affected Package

The issue is caused by package @angular/cli (may be) ?

Is this a regression?

Not sure

Description

• The initial bundle is bundling the web worker files as well - causing the initial bundle size to increase.
• These web workers are only used in lazy loaded modules. So there is no practical reason to ship this in initial bundle.
• More over, if the app have dozens of worker files, all of them used in lazy modules, all of them seem to be shipped with initial bundle.

Minimal Reproduction

Please see the zip attached. It is very minimal and fully scaffolded with angular cli and I barely touched it (touched it to wire web worker)

# history
ng new app --create-application false
cd app
ng generate application my-first-app
ng g m lazy --routing --route lazy-route --module app --project my-first-app
ng g web-worker lazy/worker

# turn on named chunks in angular.json
# integrate the web worker to lazy module
ng build my-first-app

getting

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files                                                         | Names         |      Size
main.fe4a7dc51150d09b9e11.js                                                | main          | 206.41 kB
polyfills.239a2c9ff63de04546fd.js                                           | polyfills     |  35.94 kB
runtime.913e0bfc6049b9102c12.js                                             | runtime       |   2.63 kB
⛔👉projects_my-first-app_src_app_lazy_worker_worker_ts.b86faef4e6c1068bebfc.js | -             | 104 bytes
styles.31d6cfe0d16ae931b73c.css                                             | styles        |   0 bytes

                                                                            | Initial Total | 245.08 kB

Lazy Chunk Files                                                            | Names         |      Size
projects_my-first-app_src_app_lazy_lazy_module_ts.b9a78f138e59d38b9c95.js   | -             |   1.01 kB

ZIP 💼: app.zip

For a quick look to see how the web-worker is integrated to lazy module:

// borrowed from: https://angular.io/guide/web-worker#adding-a-web-worker
@Component({
  selector: 'app-lazy',
  templateUrl: './lazy.component.html',
  styleUrls: ['./lazy.component.scss'],
})
export class LazyComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    if (typeof Worker !== 'undefined') {
      // Create a new
      const worker = new Worker(new URL('./worker.worker', import.meta.url));
      worker.onmessage = ({ data }) => {
        console.log(`page got message: ${data}`);
      };
      worker.postMessage('hello');
    } else {
      // Web workers are not supported in this environment.
      // You should add a fallback so that your program still executes correctly.
      console.log('not supported');
    }
  }
}

Exception or Error

There are no errors. But if my app have 50 web workers, all of them are shipping in the initial bundle.

Your Environment

Angular Version:

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: yarn 1.22.5
OS: win32 x64

Angular: 
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3 (cli-only)
@angular-devkit/build-angular   
@angular-devkit/core            12.0.3 (cli-only)
@angular-devkit/schematics      12.0.3 (cli-only)
@angular/cli                    12.0.3 (cli-only)
@schematics/angular             12.0.3 (cli-only)
rxjs                            6.6.7 (cli-only)
typescript                      4.2.4 (cli-only)

Anything else relevant? Nope :)

(btw, Angular is so nice and comprehensive! Keep up your good work!)

[JoostK]

Moving to the CLI as that's where the web worker integration lives. I had a quick look at the reproduction and it seems to me that only the table of initial chunks incorrectly includes the web worker bundle. That bundle is only referenced in the lazy bundle, so won't be loaded until the lazy module starts the worker.

[angular-automatic-lock-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.}