---
# System prepended metadata

title: Untitled
tags: [pitch]

---

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

### Problem

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

// ^ gives 1MB of JS for Webpack
```

![](https://i.imgur.com/LPFgQ9Q.png)

### 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:
    ![](https://i.imgur.com/6A669l8.png)
    - side-effects

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