loading external libraries in spfx wevbpart

%3CLINGO-SUB%20id%3D%22lingo-sub-78269%22%20slang%3D%22en-US%22%3Eloading%20external%20libraries%20in%20spfx%20wevbpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-78269%22%20slang%3D%22en-US%22%3E%3CP%3ESo%20I%20am%20using%20office-ui-fabric-react%20in%20my%20spfx%20webpart%2C%20and%20now%20I%20am%20preparing%20to%20do%20a%20final%20deploy%20for%20production%20use.%20My%20package%20is%20quite%20large%20so%20I%20want%20to%20load%20my%20external%20dependencies%20from%20my%20sharepoint-based%20cdn.%20When%20I%20look%20at%20stats.html%20in%20my%20temp%20folder%20it%20says%20that%20office-ui-fabric-react%20659.2k%20raw.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20I%20modify%20the%20externals%20in%20my%20config.json%20like%20this%3A%3C%2FP%3E%3CP%3E%22externals%22%3A%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%22office-ui-fabric-react%22%3A%22%3CA%20href%3D%22https%3A%2F%2Fmytenant.sharepoint.com%2Fsites%2FCDN%2FScripts%2Foffice-ui-fabric-react%2Fv4.4.0%2Foffice-ui-fabric-react.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmytenant.sharepoint.com%2Fsites%2FCDN%2FScripts%2Foffice-ui-fabric-react%2Fv4.4.0%2Foffice-ui-fabric-react.js%3C%2FA%3E%22%3C%2FP%3E%3CP%3E%26nbsp%3B%20%7D%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20ran%20gulp%20clean%2C%20and%20gulp%20bundle%20%E2%80%93ship%20and%20look%20at%20stats.html%20in%20my%20temp%20folder%20and%20is%20still%20says%20that%20office-ui-fabric-react%20is%20taking%20up%20%26nbsp%3B659.2k%20raw.%3C%2FP%3E%3CP%3EWhat%20other%20steps%20do%20I%20need%20to%20do%20to%20load%20office-ui-fabric-react%20from%20my%20cdn%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-182169%22%20slang%3D%22en-US%22%3ERe%3A%20loading%20external%20libraries%20in%20spfx%20wevbpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-182169%22%20slang%3D%22en-US%22%3E%3CP%3ERussel%20-%20did%20you%20find%20a%20solution%20for%20optimising%20the%20package%20when%20using%20Office%20UI%20Fabric%20react%3F%20I%20try%20to%20optimise%20my%20package%20and%20I%20also%20see%20this%20taking%20up%20650%20Kb%20in%20my%20package.%20I%20also%20use%20only%20a%20few%20components%2C%20but%20it%20looks%20like%20the%20whole%20fabric%20ui%20package%20is%20added.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-78353%22%20slang%3D%22en-US%22%3ERe%3A%20loading%20external%20libraries%20in%20spfx%20wevbpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-78353%22%20slang%3D%22en-US%22%3E%3CP%3ESo%20I%20thought%20maybe%20it%20was%20I%20was%20impoing%20from%20'office-ui-fabric-react%2Flib%2FMessageBar'%20and%20not%20'office-ui-fabric-react'%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20appp%20also%20uses%20moment.%20So%20I%20also%20added%20this%20to%20the%20config.json%20(just%20as%20a%20test)%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3E%22externals%22%3C%2FSPAN%3E%3CSPAN%3E%3A%20%7B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%22moment%22%3A%22http%3A%2F%2Fsomething%22%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%7D%2C%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3EI%20did%20gulp%20clean%2C%20and%20gulp%20bundle%20--ship%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3Ebut%20moment%20was%20still%20in%20the%20bundleaccording%20to%20stats.html.%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3EI%20then%20removed%20moment.js%20from%20the%20dependencies%20section%20of%20my%20package.json%20and%26nbsp%3B%20%26nbsp%3Bdid%20gulp%20clean%2C%20and%20gulp%20bundle%20--ship%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3ENow%20I%20see%20from%20the%20stats%20that%20moment%20is%20not%20in%20my%20bundle.%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3ESo%20I%20figure%20I%20need%20to%20also%20remove%20office-ui-fabric-react%20from%20my%20package.json.%20But%20when%20I%20do%20that%20%2C%20the%20project%20wont%20even%20build.%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-78280%22%20slang%3D%22en-US%22%3ERe%3A%20loading%20external%20libraries%20in%20spfx%20wevbpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-78280%22%20slang%3D%22en-US%22%3Ebtw%2C%20I%20am%20importing%20component%20from%20fabric%20like%20this%3A%3CBR%20%2F%3Eimport%20%7B%20MessageBar%2C%20MessageBarType%2C%20%7D%20from%20'office-ui-fabric-react%2Flib%2FMessageBar'%3B%3C%2FLINGO-BODY%3E
Highlighted
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
Highlighted
btw, I am importing component from fabric like this:
import { MessageBar, MessageBarType, } from 'office-ui-fabric-react/lib/MessageBar';
Highlighted

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.
 
 
Highlighted

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.