loading external libraries in spfx wevbpart

Frequent Contributor

So I am using office-ui-fabric-react in my spfx webpart, and now I am preparing to do a final deploy for production use. My package is quite large so I want to load my external dependencies from my sharepoint-based cdn. When I look at stats.html in my temp folder it says that office-ui-fabric-react 659.2k raw.


So I modify the externals in my config.json like this:

"externals": {




I ran gulp clean, and gulp bundle –ship and look at stats.html in my temp folder and is still says that office-ui-fabric-react is taking up  659.2k raw.

What other steps do I need to do to load office-ui-fabric-react from my cdn?


3 Replies
btw, I am importing component from fabric like this:
import { MessageBar, MessageBarType, } from 'office-ui-fabric-react/lib/MessageBar';

So I thought maybe it was I was impoing from 'office-ui-fabric-react/lib/MessageBar' and not 'office-ui-fabric-react'


The appp also uses moment. So I also added this to the config.json (just as a test)

  "externals": {
I did gulp clean, and gulp bundle --ship
but moment was still in the bundleaccording to stats.html.
I then removed moment.js from the dependencies section of my package.json and   did gulp clean, and gulp bundle --ship
Now I see from the stats that moment is not in my bundle.
So I figure I need to also remove office-ui-fabric-react from my package.json. But when I do that , the project wont even build.

Russel - did you find a solution for optimising the package when using Office UI Fabric react? I try to optimise my package and I also see this taking up 650 Kb in my package. I also use only a few components, but it looks like the whole fabric ui package is added.