Minimize JS/CSS library bundle

[oandregal]

Current build size

Run npm run build:standalone and note down the sizes of these files in targets/standalone (note that the bundle analyzer reports a bit more). Then gzip -c file > file.gz to get the gzipped size.

Bundle	Raw/Parsed	Gzip
happychat.css	49K	8,9K
woo.css	760	304
jpop.css	758	317
happychat.js	412K	116K

Current bundle distribution (npm run analyze-bundles):

These are the top-5 components by size:

• react-dom: 90K parsed / 28K gzip.
  • How we use its API: to render the component tree & to findDomNode in some component. Can't be replaced for the managed library, but it wouldn't be necessary for a React/Redux env target (it could be externalized in that case).
• src/ui: 67K parsed / 12K gzip
• lodash: 36K parsed, 10K gzip.
• src/state: 31K parsed, 6K gzip.
• engine.io-client: 23K parsed, 8K gzip.

Some ideas to explore

Resources:

• JavaScript start up performance
• Production Web Apps Performance Study Q4/16 - Q1/17 (gdoc with stats)
• Parsing JS / ~1Mb per second on a Moto G4

CSS

• [x] Delete unused styles https://github.com/Automattic/happychat-client/pull/67
• [x] Compress, no source maps, etc https://github.com/Automattic/happychat-client/pull/36

JS

• [x] Tooling - Webpack: scope hoisting https://github.com/Automattic/happychat-client/pull/34
• [ ] Tooling - Try different bundler: rollup https://github.com/Automattic/happychat-client/pull/111
• [ ] Tooling - Try different minifiers: babily, uglify, optimize-js.
• [ ] Tooling - Try different transpiler: google closure.
• [ ] Bundles - Create two bundles: ES6-aware browsers and ES5
• [ ] Bundles - Create a minimal bundle with SocketIO/Redux, and then async load different chunks over the network depending on needs? Like: only bundle React form components if we're going to show a form, etc. See "analysis of bundle size" below.
• [ ] Bundles - Let the host provide the vendor libraries needed (React, Redux, Lodash, etc)? Remove any deps?
• [ ] Use websockets directly instead of SocketIO? - caniuse support
• [ ] Try preact.
• [x] Substitute moment with the Internationalization API (coverage) https://github.com/Automattic/happychat-client/pull/142
• [x] Lodash: import individual packages https://github.com/Automattic/happychat-client/pull/32 https://github.com/Automattic/happychat-client/pull/140
• [x] Lodash: use lodash-webpack-plugin to drop extras (see). This was done in #174 and reverted in #182 We ran into too many bugs.
• [x] Gridicons: import the icons that we actually use https://github.com/Automattic/happychat-client/pull/148
• [ ] Remove/Minimize Calypso traces https://github.com/Automattic/happychat-client/issues/5

[oandregal]

Some stats to consider: https://github.com/GoogleChromeLabs/discovery/issues/1

[oandregal]

Parsing speed on mobile (moto G4) ~1Mb per second. Source: https://youtu.be/Fg7niTmNNLg

[oandregal]

Check optimize-js in addition to minifiers: https://github.com/nolanlawson/optimize-js/blob/master/README.md

[oandregal]

Might contain useful info: https://medium.com/reloading/javascript-start-up-performance-69200f43b201

[oandregal]

About bundles: different bundles for stuff that change frequently and stuff that doesn't so we can leverage the different caches in place - browsers (less network request time) and JS engines (less time to parse because they maintain a bytecode cache).

[oandregal]

After #32 and #34 this looks a lot better for JS: it's down to 0.8KB (~0.3KB minified) from 1.8MB.

[oandregal]

https://github.com/Automattic/happychat-client/pull/67 reduced CSS bundle from 70K to 40K.

[oandregal]

148 reduced the parsed size from 473K to 392K.

Before

After:

[oandregal]

https://github.com/Automattic/happychat-client/pull/155 By removing our custom Gridicon build and use the Gridicons 3 (which allows us to import icons individually) we have reduced the raw/parsed size to 390K (a -2K improvement), and the gzipped to 112K (-1K improvement).

[oandregal]

https://github.com/Automattic/happychat-client/pull/174 reduced 10K the raw size and 3K the gzip size by not bundling certain lodash features we're not using. See.

Note that paths and shorthands are in use, so we've not dropped them. If we change the code to further remove those, we could reduce the raw size in 5K and the gzip size in 2K.

Before:

After:

[oandregal]

174 needed to be reverted in https://github.com/Automattic/happychat-client/pull/182 it broke lodash usage in a few ways.

[oandregal]

https://github.com/Automattic/happychat-client/pull/187 has increased JS (+2K raw) and CSS (+4k raw and 2 new bundles for woo and jpop themes) bundle size. To introduce themes with CSS Custom Properties we need to polyfill for those browsers that yet don't support them.

[unDemian]

The following PRs were merged Add support for npm package #184 #183 #180 #179 #178 #177 #176

	Parsed Size	Gzipped Size	Analyze
Before	393.13 KB	112.75 KB	https://cloudup.com/cvjPjefHXYj
After	397.3 KB	113.91 KB	https://cloudup.com/ck-vWZqQPyR
Difference	4.17 KB	1.16 KB

[oandregal]

As of June 26th, this is the size report:

[oandregal]

https://github.com/Automattic/happychat-client/pull/243 has reduced bundle size in 70k parsed and 20K gzipped:

[oandregal]

By updating to React 16 in https://github.com/Automattic/happychat-client/pull/249 we've reduced happychat.js size in 36K parsed (448K to 412K), and 11K gzipped (127K to 116K):