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": {

      "office-ui-fabric-react":"https://mytenant.sharepoint.com/sites/CDN/Scripts/office-ui-fabric-react/v4.4.0/office-ui-fabric-rea..."

  },

 

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": {
"moment":"http://something"
},
 
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.