Vardhaman Deshpande: 09/01/2019

When using Office UI Fabric React (OUIFR) components in SPFx projects, if you analyse the bundle structure you will notice that OUIFR components take up a lot of space which leads to increased bundle size.

If there are multiple SPFx components loaded on the page which depend on OUIFR components, the size of each bundle will be affected, as by default the OUIFR components are included in each SPFx bundle.

One way to mitigate this issue is to include all your custom components (which depend on OUIFR) into an SPFx library component and then consume the library component from SPFx webparts and extensions. This will make sure that if you have reusable custom components, they won't be loaded multiple times on the page if multiple SPFx webparts (or extensions) are consuming them.

Let's see how to achieve this. We will be working with SPFx 1.9.1 which contains the GA version of Library Components:

1) Create SPFx Library and Consumer component structure

First, make sure you have an SPFx library project as well as a "consumer" SPFx project containing webparts (or extensions). Instructions on how to create this are in the Microsoft docs: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/library-component-tutorial

The code for this post is also available on GitHub if you want to have a look: https://github.com/vman/spfx-lib-components-ouifr

2) Create a new custom react component which internally uses Office UI Fabric React

In the library component project, create a new react component in a new file e.g. ButtonComponent.tsx

Here are the contents of the custom react component:

	import * as React from 'react';
	import { DefaultButton, Label, PrimaryButton } from 'office-ui-fabric-react';

	interface IButtonComponentProps {
	primaryButtonText: string;
	defaultButtonText: string;
	}

	export class ButtonComponent extends React.Component<IButtonComponentProps, {}> {
	public render(): JSX.Element {
	return (
	<div>
	<Label>Button Components rendered from SPFx library component:</Label>
	<PrimaryButton
	text={this.props.primaryButtonText}
	/>
	<DefaultButton
	text={this.props.defaultButtonText}
	/>
	</div>
	);
	}
	}

view raw ButtonComponent.tsx hosted with ❤ by GitHub

3) Update the index.ts file

In the index.ts file of the library component, include the new component to be exported:

	export { CustomOfficeUiFabricLibrary } from './libraries/customOfficeUiFabric/CustomOfficeUiFabricLibrary';
	export { ButtonComponent } from './libraries/customOfficeUiFabric/ButtonComponent';

view raw index.ts hosted with ❤ by GitHub

4) Update config.json

Next, in the config/config.json file of the library component, make sure that the entry point is pointing to /lib/index.js

	{
	"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
	"version": "2.0",
	"bundles": {
	"custom-office-ui-fabric-library": {
	"components": [
	{
	"entrypoint": "./lib/index.js",
	"manifest": "./src/libraries/customOfficeUiFabric/CustomOfficeUiFabricLibrary.manifest.json"
	}
	]
	}
	},
	"externals": {},
	"localizedResources": {
	"CustomOfficeUiFabricLibraryStrings": "lib/libraries/customOfficeUiFabric/loc/{locale}.js"
	}
	}

view raw config.json hosted with ❤ by GitHub

This step was not necessary in SPFx 1.8.2-plusbeta but seems there is a bug in SPFx 1.9.1. I have created a GitHub issue here:

https://github.com/SharePoint/sp-dev-docs/issues/4570

5) Update the consumer web part

Make sure that the library component is referenced in the consumer webpart e.g. through npm link or by using a monorepo manager like rush or lerna.

More details on using npm link in this in the Microsoft docs: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/library-component-tutorial

And finally, in your consumer SPFx react webpart, you can reference the custom component:

	import * as React from 'react';
	import { IHelloWorldProps } from './IHelloWorldProps';

	import { CustomOfficeUiFabricLibrary, ButtonComponent } from 'spfx-lib-ouifr';

	export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {

	private myInstance;

	constructor(props){
	super(props);
	this.myInstance = new CustomOfficeUiFabricLibrary();
	}

	public render(): React.ReactElement<IHelloWorldProps> {
	return (
	<div>
	<ButtonComponent
	primaryButtonText="Primary Button"
	defaultButtonText= "Default Button" />
	</div>
	);
	}

	public componentDidMount(){

	console.log(this.myInstance.name());
	}
	}