@fluentui/react-northstar: importing a single component adds >1MB to bundle size

[astegmaier]

Environment Information

• Package version(s): "@fluentui/react-northstar": "0.48.0"
• Browser and OS versions: All

Please provide a reproduction of the bug in a codepen:

Create a simple app with the following files:
index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

components/App.tsx

import React from "react";
import { Provider, themes, Button } from '@fluentui/react-northstar';

const App = () => (
  <Provider theme={themes.teams}>
    <Button content="Hello from FluentUI" />
  </Provider>
);

export default App;

Build it with webpack (or Parcel2) in production mode (which enables tree-shaking and minification), and you'll see a 1.3-1.4MB increase in bundle size over a simple Hello World react app that doesn't use @fluentui/react-northstar.

Here's a visualization of the minified, tree-shaken bundle from webpack, using source-map-explorer:

You can see a repro for the issue in the fluentui-button branch of this repository. Run yarn build:webpack (to see webpack bundle output), yarn build:parcel (to see parcel2 bundle output).

This is related to issue #2113, #2324, and #2324 on the legacy repo. Those are still marked as "open", and I don't see any issues or PRs addressing it in the new repo.

Actual behavior:

The bundle size increase of using a single button component is really, really big (1.3-1.4 MB). It looks like it's importing just about every component and icon into the bundle, even though the app uses no icons and only a single button component.

Expected behavior:

The bundle size increase should be "pay-to-play" - the more components/icons that I leverage, the more space it takes, and it should start small.

Priorities and help requested:

Are you willing to submit a PR to fix? Happy to help brainstorm but I don't think I have the time to fashion a full PR.

Requested priority: Medium (before a v1 release, would think it's important to get this under control).

[mnajdova]

@astegmaier that for creating the issue. We already started working on cutting the bundle size. The icons are already separated in their own package, which reduced the app bundle size for about 34%, you can see more info on that on this blog post. We started with removing some component statics that were referenced from the theme, but there are still some problems. We are doing an investigation around this now, so we are going to create a plan and share it by the end of next week.

[astegmaier]

Thanks for the details! In the original issue, I was seeing the all the icons in the bundle (i.e. the optimization you mentioned in the blog post) wasn't being reflected in either parcel or webpack.

I managed to tweak webpack to do better tree-shaking by using babel-loader instead of ts-loader, or by keeping ts-loader and making sure to set "module": "es6" in my tsconfig.json. Parcel was still including all the icons though (increasing bundle size by ~0.5 MB), and I opened this issue to see if the problem might be with Parcel instead of fluentui.

[mnajdova]

Currently we are tracking the bundle size only for webpack. Let me take a look on the issue on the parcel repo and will get back to you tomorrow. Maybe it would be good to add bundle size testsfor more bundlers.

[astegmaier]

It looks like parcel2 currently doesn't tree-shake re-exports quite as well as webpack - if you comment out line 301 from @fluentui/react-northstar/src/index.ts...

    //export * from '@fluentui/react-icons-northstar';

...the bundle size of my sample app in parcel2 shrinks from 1.1MB to 777KiB (compared to a roughly consistant 660 KiB in webpack). Hopefully, the parcel team will be able to address this before the beta release (its tracked in #4565).

Having webpack as the main standard for now seems fine to me, but since the JavaScript world changes quickly, and tree-shaking/scope-hoisting is more of an art than a science, you might get better results if you considered multiple bundlers from the outset. I'm an occasional contributor to parcel as well, and we could always use the feedback 😄

Also, you might want to look at this comment for some ideas on how make bundle size even better going forward.

[mnajdova]

Thanks for the input @astegmaier and the links to the comments. I cloned your repo and I am waiting on the new release to test again it, as we removed static className from the components so at least those are not referenced from the theme. I hope this will enable us to not have all components in the bundle when only one is used (there may be some other statics that we haven't resolved yet, but I will have to test this).

I wouldn't remove the re-export for the icons from @fluentui/react-northstar, because is convenient for users to be able to pick up the icons from the same package. If this will be solved soon, than we should not have problems with this.

We are removing slowly the withSafeTypeForAs by moving our components to be functional components, so that one will be resolved soon too. 👍

Will update you once I try the new release and will post any findings here.

[mnajdova]

@astegmaier update from my side. I upgraded locally to v0.49 andI hoped we will see better results, but it was similar. Fortunately I found the issue. In each file we are defining constants for the className of the component and it's slots, and we are exporting these in the following manner:

export * from 'component-file-path';

Just moving these contants in a dedicated file is solving the issue surprisingly.. This worked and was tested with webpack, on both your repo (fluentui-button-babel branch) and with our local bundle test tools.

This looks really strange for me, but will do some final reading and testing tomorrow, and if I don't find better reason of why this is happening, I will start with creating the files for these classes for all components, which will solve the problem with dragging all components when importing the theme.

[astegmaier]

@mnajdova That's great news! Thanks for investigating.

[mnajdova]

Here is the PR for reference: #13145 I am still surprised by this to be honest, so will ask other people for review and opinion too.

[layershifter]

Just moving these contants in a dedicated file is solving the issue surprisingly.. This worked and was tested with webpack, on both your repo (fluentui-button-babel branch) and with our local bundle test tools.

Just to clarify: the issue with remaining components in bundles is related to side-effects that we have. One of them are static properties: https://dev.to/layershifter/how-to-kill-tree-shaking-in-webpack-with-static-properties-p72

---

I went through all cases to summarize required actions:

• do not use static properties anywhere expect classes
  • enable babel-plugin-no-side-effect-class-properties for classes
• do not use defaults exports as they handled differently in Webpack (chore: remove default exports [P1] #13903, chore: remove default exports [P2] #13915, chore: remove default exports [P3] #13916, chore: remove default exports [P5] #13934)
• do not use withSafeTypeForAs (chore: remove withSafeTypeForAs #13845)
• consume plugin-transform-react-pure-annotations once it will be released (chore: bump Babel to latest #13985)
  • write a Babel plugin to annotate compose() calls as PURE
• do not use CommonJS code in dependencies
  • switch to lodash-es or remove all usages
  • switch to clsx
• solve side-effects in existing code, for example:
  • (Resolve side effects in keyboard-key/codes.ts #13729)

    fluentui/packages/keyboard-key/src/codes.ts

    Lines 79 to 87 in e12167b

    	for (let i = 0; i < 24; i += 1) {
    	codes[112 + i] = 'F' + (i + 1);
    	}
    	// Alphabet (a-Z)
    	for (let j = 0; j < 26; j += 1) {
    	const n = j + 65;
    	codes[n] = [String.fromCharCode(n + 32), String.fromCharCode(n)];
    	}