Microsoft offers great guidance on how to use OUIF with SPFx by taking an explicit dependency on the latest version of the OUIF React package. I also wrote about this previously in August of 2017. And to be crystal clear, the guidance IS THE BEST APPROACH!
You get an explicit dependency with npm i office-ui-fabric-react@latest --save (or any version you care to use), and also remember to remove the reference to @microsoft/sp-office-ui-fabric-core as mentioned in the guidance as the core styles are included in the main npm package.
A simple hello world sample will without using OUIF components be around 10KB in size, and when you add a button component with
import { Button } from 'office-ui-fabric-react/lib/Button';
the .js grows to 179KB. The size is not that bad in itself as it will be served compressed from a CDN, but it illustrates how much the bundle grows by just adding a simple OUIF component.
If you want the smallest bundle size possible and feel like living on the edge there is another option which I’ll outline below. But this approach comes with a huge caveat. Every time Microsoft release a new version of SPFx, you have to re-test and potentially rebuild and deploy your solutions as they can break if Microsoft have updated OUIF React with a breaking change.
Here’s how – stop reading if you want to play it safe!
Instead of adding a reference to office-ui-fabric-react, add a reference to @microsoft/office-ui-fabric-react-bundle instead. This is the internal version of OUIF React already bundled on each modern page.
As I’m on SPFx drop 1.4 I use:
npm i @microsoft/office-ui-fabric-react-bundle@1.4.0 --save
Be sure to use the bundle version matching your SPFx version.
Since this is a pre-bundled version of OUIF React components, you need to change from explicit static linking to dynamic linking for the components you use in your code.
import { Button } from '@microsoft/office-ui-fabric-react-bundle';
When you rebuild your web part, the size drops back down to 10kb even though the bundle file itself is 1.8MB. This is because this specific OUIF bundle is already included in the sp-pages-assembly .js file loaded automatically on a modern page. By using @microsoft/office-ui-fabric-react-bundle instead of office-ui-fabric-react we are now down to zero footprint.
If you are using the OUIF core CSS, remember to re-add @microsoft/sp-office-ui-fabric-core to your solution which adds around 1KB to the overall size.
History lesson
I raised an issue on github back in August of 2017 (https://github.com/SharePoint/sp-dev-docs/issues/769) where I point out that before SPFx v1.1.1 your solutions automagically took a dependency on the pre-loaded version of Office UI Fabric React. I discussed this a bit with Vesa Juvonen at Microsoft, and although this did work, OUIF React was not officially supported before the guidance came out which said to take an explicit dependency. If you have old solutions created pre v1.1.1, the recommendation is to upgrade those and add the explicit dependency. This will ensure your solutions will just keep on working and working and working on it :)
Summary
It is possible to get rid of the Office UI Fabric React footprint in your bundle size, but doing so requires that you have super control of your SPFx solutions and are ready to re-build and re-deploy them every time Microsoft release a new version of SPFx. So far the versions of OUIF have been backwards compatible, but we can be pretty sure that it won’t stay like this forever.
If you truly care about bundle sized, then think hard about which frameworks and components you use in your solution, and promote usage of the ones supporting static linking of the parts you use.
