---
robots: noindex, nofollow
tags: pitch
---

### Problem

import { Button, teamsTheme } from '@fluentui/react-northstar'

// ^ gives 1MB of JS for Webpack


### Solution

* convert `Dropdown` to be functional components (it's the last class component)
* use `/*#__PURE__*/` annotation in manual/automated (Babel plugin) way
* solve the most affecting side-effects
* upgrade Babel to get `/*#__PURE__*/` annotation on React functions (`React.memo()`, `React.createContext()`)

### Risks (Rabbit holes)
Even with all changes applied we may not get the best result, but the current state of things will be definitely improved.

- Lodash dependency
- CommonJS output is not tree-shakable
- ES modules prevents module concatenation (https://github.com/lodash/lodash/issues/4119), i.e. still adds 2k LoC to our bundle
- Fabric utilities
- TypeScript output for classes is not tree-shakable:
- side-effects

### Out of scope (No-gos)
- Lodash removal.