improve production bundle size

[jeremy-coleman]

I can fix this in a day or two, will you use it if i fix it? so tired of dealing with countless issues related to packaging.

[jeremy-coleman]

252kb gzippd app , in all its glory

[Vitalius1]

@kenotron this would be right about in your garden 😄

@dzearing @cliffkoh FYI

[dzearing]

@jeremy-coleman We need more info on your repro. I assure you we don't use jQuery. :)

For example, I just ran create-react-app (which now has webpack 4), and did what you did:

I believe the first import extra bytes are due to scss (side effects files) not getting tree shaken.

Do you have a webpack-bundle-analyzer graph of your build?

[dzearing]

I also compared actual file build output:

Without any references, raw create-react-app:

34.71 KB build/static/js/1.fa92c112.chunk.js
763 B build/static/js/runtime~main.229c360f.js
716 B build/static/js/main.afe6f131.chunk.js
512 B build/static/css/main.7875265d.chunk.css

With mergeStyleSets usage from 'office-ui-fabric-react' import:

47.85 KB build/static/js/1.44535d0f.chunk.js
763 B build/static/js/runtime~main.229c360f.js
749 B build/static/js/main.202e43a5.chunk.js
511 B build/static/css/main.3d194e55.chunk.css

Same, but using '@uifabric/merge-styles' import, avoiding importing 9k of scss side effects:

38.1 KB (-9.75 KB) build/static/js/1.2b8e88d7.chunk.js
763 B build/static/js/runtime~main.229c360f.js
751 B (+2 B) build/static/js/main.7a66b132.chunk.js
510 B (-1 B) build/static/css/main.e7ec6a68.chunk.css

[dzearing]

Can you also clarify what you'd like to fix? Fixes always welcome but if you provide more information, maybe we can offer more feedback on if the approach makes sense to us as well.

[jeremy-coleman]

the screen shots i posted were just from that single file, the only difference being react-scripts-ts version

I was comparing a few actually,roughly formatted as library(total)
35kb base
mobx - 20kb gzip (55kb)
rxjs 10kb (46kb)
undux 12kb (42kb)
typestyle 4kb(39kb)
redux / react-connect 6kb(41kb)
@emotion/styled - 9kb(44kb)
glamor-jss +20kb wtf
@material/styles (using styled only, no actual styles) - 16kb(51kb)
4kb(39kb) for styled, createComponent, and mergeStylesets from the @uifabric libs
255kb office ui

I have inspected bundles several times, but the deps are too nested and cross-repo to do anything about it (which is why merging them all together will reduce size significantly)

i'd like to do the following:

• fix all the versions to the same patch because they're all interdependent on each other -
  OR more ideally, put it all in 1 repo as 1 npm package and import from '@uifabric/office/package-name (excluding icons)
  -use rollup
  -remove all scss and the icons package completely
  -move docs and tests outside of the production folders