SOLVED

Bundling and "externals"

%3CLINGO-SUB%20id%3D%22lingo-sub-85451%22%20slang%3D%22en-US%22%3EBundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-85451%22%20slang%3D%22en-US%22%3E%3CP%3EMy%20current%20project%20uses%20jQuery%20and%20sp-pnp-js%2C%20and%20I%20have%20moved%20these%20to%20a%20document%20library%20in%20a%20%22cdn%22%20site%20collection%20in%20my%20tenant%20(it's%20not%20a%20*real*%20CDN%2C%20I%20just%20call%20it%20that%20--%20it%20really%20is%20just%20a%20document%20library).%20%26nbsp%3BThis%20has%20worked%20pretty%20well%20so%20far%3A%3C%2FP%3E%3CPRE%3E...snip...%0A%22externals%22%3A%20%7B%0A%20%20%20%20%22jquery%22%3A%20%22https%3A%2F%2Ftenant.sharepoint.com%2Fsites%2FCDN%2FLibraries%2FjQuery%2Fv3.2.1%2Fjquery.min.js%22%2C%0A%20%20%20%20%22sp-pnp-js%22%3A%20%22https%3A%2F%2Ftenant.sharepoint.com%2Fsites%2FCDN%2FLibraries%2Fpnp%2Fv2.0.5%2Fpnp.min.js%22%0A%20%20%7D%2C%0A...snip...%3C%2FPRE%3E%3CP%3EMy%20question%20is%20related%20to%20something%20I%20see%20in%20a%20lot%20of%20blog%20posts%20on%20the%20topic%20-%20many%20times%20I%20see%20examples%20(hello%2C%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F121%22%20target%3D%22_blank%22%3E%40Waldek%20Mastykarz%3C%2FA%3E)%20where%20the%20following%20is%20also%20in%20the%20externals%20section%20of%20config.json%2C%20like%20so%3A%3C%2FP%3E%3CPRE%3E%20%20%22externals%22%3A%20%7B%0A%20%20%20%20%22%40microsoft%2Fsp-client-base%22%3A%20%22node_modules%2F%40microsoft%2Fsp-client-base%2Fdist%2Fsp-client-base.js%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-client-preview%22%3A%20%22node_modules%2F%40microsoft%2Fsp-client-preview%2Fdist%2Fsp-client-preview.js%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-lodash-subset%22%3A%20%22node_modules%2F%40microsoft%2Fsp-lodash-subset%2Fdist%2Fsp-lodash-subset.js%22%2C%0A%20%20%20%20%22office-ui-fabric-react%22%3A%20%22node_modules%2Foffice-ui-fabric-react%2Fdist%2Foffice-ui-fabric-react.js%22%2C%0A%20%20%20%20%22react%22%3A%20%22node_modules%2Freact%2Fdist%2Freact.min.js%22%2C%0A%20%20%20%20%22react-dom%22%3A%20%22node_modules%2Freact-dom%2Fdist%2Freact-dom.min.js%22%2C%0A%20%20%20%20%22react-dom%2Fserver%22%3A%20%22node_modules%2Freact-dom%2Fdist%2Freact-dom-server.min.js%22%0A%20%20%7D%2C%3C%2FPRE%3E%3CP%3EShould%20I%20be%20doing%20this%20as%20well%3F%20Also%2C%20this%20doesn't%20really%20make%20sense%20to%20me%3B%20if%20these%20files%20are%20in%20a%20sub-folder%20of%20the%20project%20itself%2C%20how%20are%20they%20%22external%22%3F%20I'd%20love%20to%20know%20what's%20actually%20going%20on%20here%20and%20whether%20it%20is%20something%20I%20need%20to%20be%20aware%20of%20for%20my%20own%20solutions.%20%26nbsp%3BThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88889%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88889%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1096%22%20target%3D%22_blank%22%3E%40Dean%20Gross%3C%2FA%3E%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F121%22%20target%3D%22_blank%22%3E%40Waldek%20Mastykarz%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20guys.%20%26nbsp%3BVery%20helpful%20information.%20%26nbsp%3BShould%20help%20clarify%20things%20for%20the%20client!%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88774%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88774%22%20slang%3D%22en-US%22%3E%3CP%3ESee%20the%20FAQ%20in%20the%20announcement%20at%20%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fblogs%2Fgeneral-availability-of-office-365-cdn%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fblogs%2Fgeneral-availability-of-office-365-cdn%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88740%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88740%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20latest%20documentation%20is%20available%20at%20%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fsharepoint-framework-overview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fsharepoint-framework-overview%3C%2FA%3E.%26nbsp%3BIt%20consists%20of%26nbsp%3Bguidance%20articles%20and%20tutorials%20describing%20specific%20scenarios.%26nbsp%3BIt's%20all%20GitHub-based%20so%20if%20you%20see%20any%20mistakes%2C%20inconsistencies%20or%20are%20missing%20specific%20documentation%2C%20please%20don't%20hesitate%20to%20submit%20an%20issue%26nbsp%3Bon%20GitHub%20at%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fsharepoint%2Fsp-dev-docs%2Fissues%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fsharepoint%2Fsp-dev-docs%2Fissues%3C%2FA%3E.%26nbsp%3BThe%20documentation%20is%20open%20source%2C%20so%20you%20can%20request%20a%20specific%20article%20as%20well%20as%20write%20it%20yourself%20and%20submit%20as%20a%20pull%20request.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88738%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88738%22%20slang%3D%22en-US%22%3E%3CP%3EI%20don't%20know%20about%20the%20exact%20bit%20you're%20referring%20to%2C%20but%20what%20Vesa%20said%2C%20makes%20sense%20if%20you're%20thinking%20about%20using%20a%20public%20CDN.%20Imagine%3A%20you're%26nbsp%3Bloading%20a%20script%20from%20a%20location%20that%20you%20have%20no%20control%20over.%20If%20that%20script%20gets%20hacked%2C%20and%20given%20that%20it's%20running%20without%20any%20restrictions%20on%20your%20intranet%20pages%2C%20it%20could%20be%20used%20to%20gain%20access%20to%20your%20confidential%20data.%26nbsp%3BThis%20risk%20is%20not%20specific%20to%20CDNs%3A%20any%20location%20that's%20not%20properly%20secured%20and%20doesn't%20have%20its%20governance%20in%20place%26nbsp%3Bposes%20the%20same%20risks.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt's%20worth%20keeping%20in%20mind%20that%20using%20a%20CDN%20doesn't%20guarantee%20a%20better%20performance.%20If%20your%20organization%26nbsp%3Bhas%20one%20office%20or%20is%20located%20in%26nbsp%3Bone%20region%2C%20you%20could%20get%20better%20performance%20from%20a%26nbsp%3Bhosting%20location%20optimized%20for%20serving%20static%20assets%20than%20from%20a%20CDN.%20CDN%20offers%20you%20the%26nbsp%3Bmost%20benefits%2C%20when%20your%20users%20are%20spread%20all%20over%20the%20world.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88685%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88685%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1096%22%20target%3D%22_blank%22%3E%40Dean%20Gross%3C%2FA%3E%2C%3C%2FP%3E%3CP%3EInteresting%20that%20you%20would%20say%20that%20because%20that's%20not%20what%20I%20remember%20from%20his%20demo%2C%20and%20a%20subsequent%20Webinar%20on%20JS%20security%20from%20Rencore%20a%20few%20weeks%20ago%20made%20a%20point%20of%20saying%20that%20using%20a%20CDN%20was%20a%20trade-off%20to%20get%20better%20performance%20at%20the%20expense%20of%20the%20asset's%26nbsp%3Bsecurity.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20you%20point%20me%20to%20the%20%22spot%22%20in%20the%20video%20where%20Vesa%20says%20this%3F%20%26nbsp%3BThanks.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88677%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88677%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%2C%20Waldek.%20%26nbsp%3BI%20thought%20it%20might%20be%20something%20like%20that%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20the%20problem%20with%20not%20having%20FULL%2FCOMPLETE%2FTHOROUGH%2FCURRENT%20documentation%20for%20the%20platform.%20%26nbsp%3BWhen%20we%20have%20to%20rely%20on%20trawling%20the%20web%20for%20posts%20to%20get%20info%2C%20it's%20inevitable%20that%20some%20will%20be%20out%20of%20date%20because%20what's%20on%20the%20internet%20is%20pretty%20much%20there%20forever...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20again.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-87483%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-87483%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20don't%20need%20to%20do%20this.%20What%20you're%20looking%20at%20is%20a%20project%20created%20an%20older%20version%20of%20the%20SharePoint%20Framework%2C%20where%20more%20packages%20have%20been%26nbsp%3Blisted%20as%20external.%20In%20the%20latest%20version%20it's%20not%20required%20anymore%20which%20is%20why%20you're%20not%20seeing%20them%20anymore.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-86158%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-86158%22%20slang%3D%22en-US%22%3E%22Public%22%20is%20a%20poorly%20choosen%20word%2C%20all%20that%20it%20means%20is%20that%20anyone%20who%20has%20access%20to%20the%20tenant%20will%20have%20access%20to%20the%20resource.%20If%20you%20are%20not%20already%20logged%20into%20the%20tenant%20then%20you%20cannot%20get%20to%20the%20item%20in%20the%20%22public%20CDN%22.%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3Eexplained%20this%20in%20his%20demo.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-86106%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-86106%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1096%22%20target%3D%22_blank%22%3E%40Dean%20Gross%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20yeah%2C%20I've%20played%20with%20that%20and%20got%20it%20to%20work%20fine.%20%26nbsp%3BBut%20given%20the%20fine%20details%20(limited%20support%20for%20Private%20CDN%2C%20and%20Public%20CDN%20being...well%2C%20*public*)%2C%20that%20solution%20is%20a%20non-starter%20for%20my%20customer%20--%20they're%20much%20more%20comfortable%20with%20their%20assets%20continuing%20to%20be%20contained%20directly%20within%20their%20own%20SP%20sites.%20A%20dedicated%20site%20collection%2C%20site%20and%20document%20libraries%20are%20serving%20that%20function%20well%20at%20the%20moment.%20%26nbsp%3BIf%20the%20customer%20comes%20back%20to%20me%20at%20a%20later%20date%20worried%20about%20performance%2C%20I%20can%20have%20the%20CDN%20talk%20with%20them%20again.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMy%20question%20is%20not%20about%20where%20the%20assets%20should%20be%20stored%20--%20it's%20about%20which%20ones%20I%20should%20instruct%20the%20tool%20chain%20to%20treat%20as%20external%20to%20the%20project%20so%20I%20don't%20end%20up%20bundling%20the%20same%20code%20into%20multiple%20web%20parts%20which%20will%20be%20running%20on%20the%20same%20page.%20%26nbsp%3BI'd%20like%20to%20lighten%20the%20web%20parts%20as%20much%20as%20possible%20to%20improve%20page-load%20performance%20on%20the%20intranet.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-85835%22%20slang%3D%22en-US%22%3ERe%3A%20Bundling%20and%20%22externals%22%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-85835%22%20slang%3D%22en-US%22%3E%3CP%3ESorry%2C%20I%20don't%20know%20the%20answer%20to%20your%20specific%20question%2C%20but%20you%20may%20be%20interested%20in%20using%20a%20real%20CDN%20that%20MS%20recently%20announced%20support%20for%2C%20see%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fblogs%2Fgeneral-availability-of-office-365-cdn%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fblogs%2Fgeneral-availability-of-office-365-cdn%3C%2FA%3Efor%20the%20details%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

My current project uses jQuery and sp-pnp-js, and I have moved these to a document library in a "cdn" site collection in my tenant (it's not a *real* CDN, I just call it that -- it really is just a document library).  This has worked pretty well so far:

...snip...
"externals": {
    "jquery": "https://tenant.sharepoint.com/sites/CDN/Libraries/jQuery/v3.2.1/jquery.min.js",
    "sp-pnp-js": "https://tenant.sharepoint.com/sites/CDN/Libraries/pnp/v2.0.5/pnp.min.js"
  },
...snip...

My question is related to something I see in a lot of blog posts on the topic - many times I see examples (hello, @Waldek Mastykarz) where the following is also in the externals section of config.json, like so:

  "externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js"
  },

Should I be doing this as well? Also, this doesn't really make sense to me; if these files are in a sub-folder of the project itself, how are they "external"? I'd love to know what's actually going on here and whether it is something I need to be aware of for my own solutions.  Thanks.

10 Replies
Highlighted

Sorry, I don't know the answer to your specific question, but you may be interested in using a real CDN that MS recently announced support for, see https://dev.office.com/blogs/general-availability-of-office-365-cdn for the details

Highlighted

@Dean Gross,

 

Thanks, yeah, I've played with that and got it to work fine.  But given the fine details (limited support for Private CDN, and Public CDN being...well, *public*), that solution is a non-starter for my customer -- they're much more comfortable with their assets continuing to be contained directly within their own SP sites. A dedicated site collection, site and document libraries are serving that function well at the moment.  If the customer comes back to me at a later date worried about performance, I can have the CDN talk with them again.

 

My question is not about where the assets should be stored -- it's about which ones I should instruct the tool chain to treat as external to the project so I don't end up bundling the same code into multiple web parts which will be running on the same page.  I'd like to lighten the web parts as much as possible to improve page-load performance on the intranet.

Highlighted
"Public" is a poorly choosen word, all that it means is that anyone who has access to the tenant will have access to the resource. If you are not already logged into the tenant then you cannot get to the item in the "public CDN". @Vesa Juvonen explained this in his demo.
Highlighted
Solution

You don't need to do this. What you're looking at is a project created an older version of the SharePoint Framework, where more packages have been listed as external. In the latest version it's not required anymore which is why you're not seeing them anymore.

Highlighted

Thanks, Waldek.  I thought it might be something like that :)

 

This is the problem with not having FULL/COMPLETE/THOROUGH/CURRENT documentation for the platform.  When we have to rely on trawling the web for posts to get info, it's inevitable that some will be out of date because what's on the internet is pretty much there forever...

 

Thanks again.

Highlighted

@Dean Gross,

Interesting that you would say that because that's not what I remember from his demo, and a subsequent Webinar on JS security from Rencore a few weeks ago made a point of saying that using a CDN was a trade-off to get better performance at the expense of the asset's security.

 

Can you point me to the "spot" in the video where Vesa says this?  Thanks.

 

Highlighted

I don't know about the exact bit you're referring to, but what Vesa said, makes sense if you're thinking about using a public CDN. Imagine: you're loading a script from a location that you have no control over. If that script gets hacked, and given that it's running without any restrictions on your intranet pages, it could be used to gain access to your confidential data. This risk is not specific to CDNs: any location that's not properly secured and doesn't have its governance in place poses the same risks.

 

It's worth keeping in mind that using a CDN doesn't guarantee a better performance. If your organization has one office or is located in one region, you could get better performance from a hosting location optimized for serving static assets than from a CDN. CDN offers you the most benefits, when your users are spread all over the world.

Highlighted

The latest documentation is available at https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview. It consists of guidance articles and tutorials describing specific scenarios. It's all GitHub-based so if you see any mistakes, inconsistencies or are missing specific documentation, please don't hesitate to submit an issue on GitHub at https://github.com/sharepoint/sp-dev-docs/issues. The documentation is open source, so you can request a specific article as well as write it yourself and submit as a pull request.

Highlighted
Highlighted

@Dean Gross@Waldek Mastykarz,

 

Thanks, guys.  Very helpful information.  Should help clarify things for the client! :)