Shrink SignalR JS client (to 11kB compressed) #30320

benaadams · 2021-02-20T03:00:18Z

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 · 2021-02-20T03:09:11Z

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 · 2021-02-20T03:17:08Z

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 · 2021-02-20T05:35:00Z

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

src/SignalR/clients/ts/FunctionalTests/package.json

javiercn · 2021-02-20T09:48:05Z

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 · 2021-02-20T15:24:52Z

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 · 2021-02-20T16:28:37Z

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

benaadams · 2021-02-20T16:58:08Z

Can go smaller :)

javiercn · 2021-02-20T21:47:23Z

This is great!

benaadams · 2021-02-22T05:06:13Z

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 · 2021-02-22T06:15:32Z

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 · 2021-02-22T09:40:20Z

@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 · 2021-02-24T18:46:31Z

@BrennanConroy feel free to merge when you are happy.

BrennanConroy · 2021-02-24T18:57:24Z

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 · 2021-02-24T19:57:55Z

There are a couple broken npm unit tests.

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

src/Components/Web.JS/src/GlobalExports.ts

src/Components/Web.JS/src/webpack.config.js

src/Components/Web.JS/src/yarn.lock

benaadams · 2021-02-24T22:24:43Z

Still here 😆

Removed this time 😀

benaadams · 2021-02-25T04:06:12Z

Merged feedback commits to retrigger CI (transient error)

benaadams · 2021-02-25T04:19:25Z

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 · 2021-02-25T09:43:31Z

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

benaadams · 2021-02-25T15:12:17Z

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

javiercn · 2021-02-25T15:21:29Z

@benaadams I suspect it has to do with #30445

benaadams · 2021-02-25T15:24:34Z

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 · 2021-02-25T19:04:42Z

🥳

BrennanConroy · 2021-02-25T19:07:42Z

Thanks @benaadams !

benaadams requested review from BrennanConroy and halter73 as code owners February 20, 2021 03:00

ghost added the area-signalr Includes: SignalR clients and servers label Feb 20, 2021

benaadams mentioned this pull request Feb 20, 2021

Shrink SignalR JS Client #30319

Closed

benaadams force-pushed the Shrink-SignalR-JS-client branch 2 times, most recently from 68d1d19 to 6611802 Compare February 20, 2021 03:41

javiercn reviewed Feb 20, 2021

View reviewed changes

src/SignalR/clients/ts/FunctionalTests/package.json Outdated Show resolved Hide resolved

javiercn mentioned this pull request Feb 20, 2021

[Blazor] Update bundle generation to use Webpack 5 #29904

Closed

benaadams force-pushed the Shrink-SignalR-JS-client branch from 3ea529a to d9ad305 Compare February 20, 2021 14:56

benaadams changed the title ~~Shrink SignalR JS client~~ Shrink SignalR JS client (to 13kB compressed) Feb 20, 2021

benaadams force-pushed the Shrink-SignalR-JS-client branch from d9ad305 to 2d8ab24 Compare February 20, 2021 16:53

benaadams changed the title ~~Shrink SignalR JS client (to 13kB compressed)~~ Shrink SignalR JS client (to 11kB compressed) Feb 20, 2021

benaadams force-pushed the Shrink-SignalR-JS-client branch from 2d8ab24 to 1be32ca Compare February 20, 2021 22:08

benaadams requested a review from a team as a code owner February 20, 2021 22:08

benaadams force-pushed the Shrink-SignalR-JS-client branch 3 times, most recently from 20961d1 to 555fe47 Compare February 21, 2021 08:24

mkArtakMSFT added the community-contribution Indicates that the PR has been added by a community member label Feb 21, 2021

benaadams force-pushed the Shrink-SignalR-JS-client branch from 555fe47 to be2e537 Compare February 21, 2021 17:21

benaadams force-pushed the Shrink-SignalR-JS-client branch from eb358bf to c0a3f76 Compare February 24, 2021 01:16

halter73 approved these changes Feb 24, 2021

View reviewed changes

BrennanConroy approved these changes Feb 24, 2021

View reviewed changes

src/Components/Web.JS/src/GlobalExports.ts Outdated Show resolved Hide resolved

src/Components/Web.JS/src/webpack.config.js Outdated Show resolved Hide resolved

src/Components/Web.JS/src/yarn.lock Outdated Show resolved Hide resolved

benaadams force-pushed the Shrink-SignalR-JS-client branch from a1b86bc to 1ba0197 Compare February 25, 2021 04:05

benaadams added 10 commits February 25, 2021 15:13

Shrink SignalR JS client

f375f53

Update Blazor Js to Webpack5

a35e826

Move msgpack5 -> @msgpack/msgpack

c9675cc

Feedback

a462496

Hoist logger msg creation

ebc63a9

SignalR: prefix private members with underscore and mangle

8396237

Mark both .ts and .js as sideEffects

08ff7e5

Feedback

3fe123d

_transport -> transport (visible for tests)

dc84812

Feedback

37373c2

benaadams force-pushed the Shrink-SignalR-JS-client branch from 1ba0197 to 37373c2 Compare February 25, 2021 15:13

BrennanConroy merged commit 739f585 into dotnet:main Feb 25, 2021

benaadams deleted the Shrink-SignalR-JS-client branch February 25, 2021 19:23

davidfowl added this to the 6.0-preview3 milestone Apr 7, 2021

Shrink SignalR JS client (to 11kB compressed) #30320

Shrink SignalR JS client (to 11kB compressed) #30320

Uh oh!

Conversation

benaadams commented Feb 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Highlights

Main changes

Required docs change

Sizes

Uh oh!

BrennanConroy commented Feb 20, 2021

Uh oh!

benaadams commented Feb 20, 2021

Uh oh!

benaadams commented Feb 20, 2021

Uh oh!

Uh oh!

javiercn commented Feb 20, 2021

Uh oh!

benaadams commented Feb 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidfowl commented Feb 20, 2021

Uh oh!

benaadams commented Feb 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javiercn commented Feb 20, 2021

Uh oh!

benaadams commented Feb 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benaadams commented Feb 22, 2021

Uh oh!

javiercn commented Feb 22, 2021

Uh oh!

javiercn commented Feb 24, 2021

Uh oh!

BrennanConroy commented Feb 24, 2021

Uh oh!

benaadams commented Feb 24, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

benaadams commented Feb 24, 2021

Uh oh!

benaadams commented Feb 25, 2021

Uh oh!

benaadams commented Feb 25, 2021

Uh oh!

javiercn commented Feb 25, 2021

Uh oh!

benaadams commented Feb 25, 2021

Uh oh!

javiercn commented Feb 25, 2021

Uh oh!

benaadams commented Feb 25, 2021

Uh oh!

benaadams commented Feb 25, 2021

Uh oh!

BrennanConroy commented Feb 25, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

benaadams commented Feb 20, 2021 •

edited

Loading

benaadams commented Feb 20, 2021 •

edited

Loading

benaadams commented Feb 20, 2021 •

edited

Loading

benaadams commented Feb 22, 2021 •

edited

Loading