---
title: Bundle size performance
tags: performance
---

## Summary
Both fui0 and oufr use similar approach - use webpack to compile individual components, measure filesize of the built bundle:

#### fui0

#### oufr

*Used `optimization: { concatenateModules: false }` to get these maps.*

### fui0 concerns
* fui0 bundle contains lodash
* measures unthemed component
* there is also theme bundle measured but that does not say anything about tree-shakability
* fui0 measures un-minified bundle
* oufr uses Size Auditor to analyze changes:
* oufr adds links to PR

### What are the question(s) bundle size analysis should answer?
to discuss

### Proposal for bundle size gathering
Depends on what question it is supposed to answer.
1. leave fui0 bundle size stats as they are
2. create implicit examples, wrapping component with `Provider` and Teams theme
* than either consider the total size
* or the size increase compared to `Provider` without the component
4. measure size of docsite examples
5. manually add explicit bundle size examples (similar to perf bundle approach)

## Build pipeline details

### fui0 pipeline

- `yarn stats:build`
-> `gulp:stats` ([scripts/gulp/tasks/stats.ts](https://github.com/miroslavstastny/office-ui-fabric-react/blob/d57d727f68a128f16a5574048b84aecd8cd2aad7/scripts/gulp/tasks/stats.ts#L130))

For all components, runs webpack with `scripts/webpack/webpack.config.stats.ts` configuration, using the component sourcefile as the only input.
(Does the same thing for all themes, `@fluent-ui/react` and `bundle-utils`?)

All the packages are built to `stats`, webpack plugin cleans the folder.
-> `packages/fluentui/docs/src/bundleStats.json`

Requires `yarn build` to be executed before, `yarn stats:build` takes ~80s

### OUFR pipeline

- azure-pipelines.bundlesize.yml

-> `yarn buildto test-bundles`
-> `yarn workspace test-bundles bundle:size`
-> `yarn bundlesizecollect`
-> > `just-scripts bundle-size-collect`
-> > > `scripts/tasks/bundle-size-collect.js`

`test-bundles bundle:size`, similarly to fui0, runs webpack per file in oufr bundle root.
`bundle-size-collect` takes the filesize of built min.js file.

### Others

[bundlephobia.com](https://bundlephobia.com/result?p=@fluentui/react@0.45.0) uses [`package-build-stats`](https://github.com/pastelsky/package-build-stats#readme)
[Shift] Rollup can run multiple builds in pararallel while Webpack can't