Lighthouse "Best Practices" issue with zone.js

🐞 bug report

Affected Package

The issue is caused by zone.js

Is this a regression?

not applicable

Description

polyfills.ts contains:

import 'zone.js/dist/zone'; // Included with Angular CLI.

When running lighthouse on my app, I see this:

grepping though all the files that polyfills.ts pulls in, only zone.js uses unload.

The details of the issue are here ->

https://developers.google.com/web/updates/2018/07/page-lifecycle-api?utm_source=lighthouse&utm_medium=devtools#the-unload-event

🔬 Minimal Reproduction

Running Lighthouse on any angular app should exhibit the issue.

🌍 Your Environment

Angular Version:

Angular CLI: 10.1.7
Node: 12.18.3
OS: darwin x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.1
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.1
@angular-devkit/schematics      10.1.7
@angular/cli                    10.1.7
@nguniversal/builders           10.1.0
@nguniversal/express-engine     10.1.0
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.6.3
typescript                      4.0.3

Anything else relevant?

Chrome -> Version 86.0.4240.111 (Official Build) (x86_64)

[Splaktar]

Investigation

I’m seeing this in https://www.devintent.com/ which does not use fbevents.js.

I looked at each of the libraries in my polyfills.ts and the only one with the string 'unload' in it is zone.js.

Then after reading this thread, I thought that I might have been wrong… so I went and looked at https://www.devintent.com/polyfills-es2015.00bf12ee6ad9d54b5a1c.js and searched for the string in there and the only place that it was found was in the zone.js code.

This error alone, takes 7 points off of the Lighthouse Best Practices audit.

How to find the real culprit in your app

I think that many people are going to hit this issue. It might be worth pinning it and providing clear steps for how to track down the actual library that registers the unload listener:

1. Open your app in incognito mode to run lighthouse audits

2. If you see this issue in the Best Practices audit, go to your Sources tab

3. Right click on the top folder in the left panel

   

4. Select “Search all files”

5. Search for addEventListener("unload"

In my case, the offending library is LogRocket.

Should we write up an issue in the Lighthouse repo to ask them to make it smarter? It seems like the audit should be able to do this kind of thing automatically and save us a lot of extra issues.

[initplatform]

This is the contents of my polyfills.ts with all comments removed:

import '@angular/localize/init';

import 'zone.js/dist/zone'; // Included with Angular CLI.

import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();

smoothscroll does not appear to be using unload -> https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js

I wonder if lighthouse is incorrectly thinking zone.js is using unload, since it includes -> node_modules/zone.js/dist/zone.js - line 2332

    var windowEventNames = [
        'absolutedeviceorientation',
        'afterinput',
        'afterprint',
        'appinstalled',
        'beforeinstallprompt',
        'beforeprint',
        'beforeunload',
        'devicelight',
        'devicemotion',
        'deviceorientation',
        'deviceorientationabsolute',
        'deviceproximity',
        'hashchange',
        'languagechange',
        'message',
        'mozbeforepaint',
        'offline',
        'online',
        'paint',
        'pageshow',
        'pagehide',
        'popstate',
        'rejectionhandled',
        'storage',
        'unhandledrejection',
        'unload',
        'userproximity',
        'vrdisplayconnected',
        'vrdisplaydisconnected',
        'vrdisplaypresentchange'
    ];