Shrink SignalR JS client (to 11kB compressed)

[benaadams]

Highlights

Significantly shrinks the uncompressed sizes of SignalR, MsgPack and Blazor.Server; and their corresponding compressed sizes. Leading to faster downloads and less JS parsing and compiling by the browser, allowing for faster start-up.

Shrinks signalr.min.js by 91 kB (now 10 kB br compressed, 12 kB gz compressed)
Shrinks blazor.server.js by 96 kB (now 28 kB br compressed, 33 kB gz compressed)
Shrinks add-on msgpack by 112 kB (now 8 kB br compressed, 9 kB gz compressed)
Don't need to add an additional script reference to msgpack5.js when using mspack

Main changes

• Updates TypeScript and dependencies to latest versions
• uglify-js does not support ES6+; so switched to terser which is also webpack's default as it supports new JS language features (like class)
• Marked the SingalR modules as "sideEffects": false; so tree-shaking can work better
• Dropped the "es6-promise/dist/es6-promise.auto.js" pollyfill
• Changed TS to output es2019 rather than es5 and dropped the "es2015.promise" and "es2015.iterable" pollyfills
  Note: es2019 is already being used by Blazor
  

  aspnetcore/src/Components/Web.JS/tsconfig.json

  Lines 8 to 9 in a28da74

  	"target": "es2019",
  	"lib": ["es2019", "dom"],

• Moved to msgpack5 from @msgpack/msgpack as it requires less pollyfills, is typescript & module aware

Required docs change

• Now only need the @microsoft/signalr-protocol-msgpack package for msgpack; don't need to include msgpack5 which means its an additional 29 kB rather than 140 kB to use msgpack rather than Json (protocol-msgpack 16 kb + msgpack5 124 kB)

Sizes

SignalR before (130 kB minimized)
SignalR after (39 kB minimized, 10 kB br compressed, 12 kB gz compressed)

Shrinks blazor.server.js by 45% from 212 kb to 116 kB (to 28 kB br compressed, 33 kB gz compressed)

Addresses #30319
Addresses #29904

[BrennanConroy]

Nice, is the main benefit from using terser instead of uglify-js?

We'll need to discuss some of the version updates with the team before merging this.

[benaadams]

is the main benefit from using terser instead of uglify-js

• uglify-js does not support ES6+; so switched to terser which is also webpack's default as it supports new JS language features (like class)

• Marked the SingalR modules as "sideEffects": false; so tree-shaking can work better

• Dropped the "es6-promise/dist/es6-promise.auto.js" pollyfill

• Changed TS to output es2019 rather than es5 and dropped the "es2015.promise" and "es2015.iterable" pollyfills

[benaadams]

Note: es2019 is already being used by Blazor

aspnetcore/src/Components/Web.JS/tsconfig.json

Lines 8 to 9 in a28da74

	"target": "es2019",
	"lib": ["es2019", "dom"],

[javiercn]

Note: es2019 is already being used by Blazor

Yep, I'm not sure if SignalR needs to support IE11 or so though. That said, it shouldn't be hard to produce a separate ES5 bundle I think.

I've put a link on this PR to the issue we have for doing this on Blazor so that we don't loose track of it.

Thanks @benaadams for doing this work!

[benaadams]

Yep, I'm not sure if SignalR needs to support IE11 or so though.

.NET 6.0 is coming out in Nov 2021; Teams has already dropped support for IE11 (Aug 17 2020) and Microsoft 365 drops support on Aug 17 2021 and Microsoft Edge supports Windows 7 so... 🤷‍♂️

[davidfowl]

We don't support IE11. You need to add polyfills to get IE11 support AFAIK

[benaadams]

Can go smaller :)

[javiercn]

This is great!

[benaadams]

Moved to msgpack5 from @msgpack/msgpack as it requires less pollyfills, is typescript & module aware

Shrinks blazor.server.js by 45% from 212kb to 116kB (to 28kB br compressed, 33kB gz compressed)

[benaadams]

Required docs change

• Now only need the @microsoft/signalr-protocol-msgpack package for msgpack; don't need to include msgpack5 which means its an additional 29kB rather than 140kB to use msgpack rather than Json (protocol-msgpack 16kb + msgpack5 124kB)

[javiercn]

@benaadams really nice to see this coming along.

Let me know when you are ready for me to review, but so far what I've seen looks great.

[javiercn]

@BrennanConroy feel free to merge when you are happy.

[BrennanConroy]

There are a couple broken npm unit tests.
You can run yarn test from the https://github.com/dotnet/aspnetcore/tree/main/src/SignalR/clients/ts directory to run them locally.

I have created PR #30409 to address the issue with them not showing up in the CI.

[benaadams]

There are a couple broken npm unit tests.

Fixed, one was irrelevant and other was internals visible to (e.g. remove the _ prefix)

[benaadams]

Still here 😆

Removed this time 😀

[benaadams]

Merged feedback commits to retrigger CI (transient error)

[benaadams]

Same failures with submodules 😥

HEAD is now at 4ef7401480 Merge 1ba0197e771bb654b71dd5e705702fe98fa93914 into dd126d47b1a33fde1ce2c73c9f7d0ae2fddd9a7c
git submodule sync --recursive
git -c http.https://github.com.extraheader="AUTHORIZATION: basic ***" submodule update --init --force --recursive
Submodule 'src/submodules/MessagePack-CSharp' (https://github.com/aspnet/MessagePack-CSharp.git) registered for path 'src/submodules/MessagePack-CSharp'
Submodule 'googletest' (https://github.com/google/googletest) registered for path 'src/submodules/googletest'
Cloning into '/datadisks/disk1/workspace/_work/1/s/src/submodules/MessagePack-CSharp'...
fatal: unable to access 'https://github.com/aspnet/MessagePack-CSharp.git/'
  : Problem with the SSL CA cert (path? access rights?)
fatal: clone of 'https://github.com/aspnet/MessagePack-CSharp.git' into submodule path '/datadisks/disk1/workspace/_work/1/s/src/submodules/MessagePack-CSharp' failed
Failed to clone 'src/submodules/MessagePack-CSharp'. Retry scheduled
Cloning into '/datadisks/disk1/workspace/_work/1/s/src/submodules/googletest'...
fatal: unable to access 'https://github.com/google/googletest/'
  : Problem with the SSL CA cert (path? access rights?)
fatal: clone of 'https://github.com/google/googletest' into submodule path '/datadisks/disk1/workspace/_work/1/s/src/submodules/googletest' failed
Failed to clone 'src/submodules/googletest'. Retry scheduled
Cloning into '/datadisks/disk1/workspace/_work/1/s/src/submodules/MessagePack-CSharp'...
fatal: unable to access 'https://github.com/aspnet/MessagePack-CSharp.git/'
  : Problem with the SSL CA cert (path? access rights?)
fatal: clone of 'https://github.com/aspnet/MessagePack-CSharp.git' into submodule path '/datadisks/disk1/workspace/_work/1/s/src/submodules/MessagePack-CSharp' failed
Failed to clone 'src/submodules/MessagePack-CSharp' a second time, aborting

[javiercn]

@pranavkm can you help out @benaadams here since you've been playing around this area?

[benaadams]

I could try a rebase? Bit weird getting the submodules only fails on one platform though...

[javiercn]

@benaadams I suspect it has to do with #30445

[benaadams]

Sigh... now apt-get is failing

Get:17 http://archive.ubuntu.com/ubuntu bionic-backports/universe amd64 Packages [11.4 kB]
Get:18 http://archive.ubuntu.com/ubuntu bionic-backports/main amd64 Packages [11.3 kB]
Fetched 22.0 MB in 3s (6645 kB/s)
Reading package lists...
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/p/python2.7/libpython2.7-minimal_2.7.17-1~18.04ubuntu1.3_amd64.deb  404  Not Found [IP: 91.189.88.142 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/p/python2.7/python2.7-minimal_2.7.17-1~18.04ubuntu1.3_amd64.deb  404  Not Found [IP: 91.189.88.142 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/p/python2.7/libpython2.7-stdlib_2.7.17-1~18.04ubuntu1.3_amd64.deb  404  Not Found [IP: 91.189.88.142 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/p/python2.7/python2.7_2.7.17-1~18.04ubuntu1.3_amd64.deb  404  Not Found [IP: 91.189.88.142 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
The command '/bin/sh -c apt-get update &&     apt-get -qqy install --no-install-recommends         jq         wget         locales         python         fakeroot         debhelper         build-essential         devscripts         unzip &&     rm -rf /var/lib/apt/lists/*' returned a non-zero code: 100

[benaadams]

🥳

[BrennanConroy]

Thanks @benaadams !