Forum Discussion

Russell Gove's avatar
Russell Gove
Iron Contributor
Jun 15, 2017

loading external libraries in spfx wevbpart

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-react.js"

  },

 

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?

 

  • Russell Gove's avatar
    Russell Gove
    Iron Contributor
    Jun 15, 2017
    btw, I am importing component from fabric like this:
    import { MessageBar, MessageBarType, } from 'office-ui-fabric-react/lib/MessageBar';
    • Russell Gove's avatar
      Russell Gove
      Iron Contributor
      Jun 16, 2017

      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.
       
       
      • Robert Schouten's avatar
        Robert Schouten
        MVP
        Apr 12, 2018

        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.

Resources