(See http://blog-awkarin.blogspot.com/search?q=an-even-better-bundle-optimization for an fifty-fifty amend solution)
When I wrote the Modern Script Editor spider web component subdivision I went amongst using Office UI Fabric React (ouifr) for the editor UI. The spider web component subdivision bundle yields a zipped script file of 84KB when used on a page. Not that much really, in addition to it volition live cached inwards the browser. But almost of the bundle size is due to the purpose of ouifr inwards the edit experience of the spider web component subdivision – non needed inwards persuasion way for a page.
Thus I’ve had a nagging feeling working on my heed for a while, in addition to it occurred to me; why can’t I guide maintain the editor experience split from the run-time experience?
And you lot can!! which I volition explicate how farther inwards this post.
The upshot is that the updated spider web component subdivision straightaway volition download 4KB zipped on run-time instead of 84KB. H5N1 whopping 95% decrease. The editor experience volition live some other 141KB, which is to a greater extent than inwards full than before, but this exclusively happens when you lot edit the page in addition to spider web component subdivision – sure a skillful merchandise off.
Bundle size revisited
When edifice SPFx components, whatever external library you lot add together to your projection volition live included inwards the transpiled bundle, after existence downloaded in addition to bootstrapped on the page you lot purpose the spider web component subdivision or extension on.You tin accept payoff of asset bundling in addition to the built-in CDN inwards SharePoint Online, or deploy the files to your ain CDN, but the initial script size is even so the same, in addition to bootstrapping many large libraries volition add together to script running speed inwards your browser. This means, the less script you lot download in addition to bootstrap on a page, the faster the page volition run. Certainly something your end-users volition appreciate.
Personally I opt for using asset bundling inwards my SPFx project, in addition to purpose the CDN inwards SharePoint Online. This yields for the easiest setup for information technology in addition to for me equally a developer. This post volition focus on how to accomplish dynamic loading of script when using asset bundling.
Breaking upwards the bundle
In guild to intermission upwards a SPFx bundle where you lot dynamically charge script resources you lot demand to practice the following:- Create a split projection which builds your script/component, or download the script from somewhere
- Make sure your script is included inwards the SPFx .sppkg file
- Load the script runtime when needed
Create a library project
For the script editor spider web component subdivision I started amongst create-react-library equally the basis, fiddled around equally good many hours in addition to ended upwards amongst https://github.com/wobba/sharepoint-modern-script-editor-propertypane amongst a working webpack file which handles typescript in addition to sass files. I in addition to so moved the editor.tsx file from the script editor spider web component subdivision over to this novel project. When building, this creates an isolated react constituent equally a .js file.Include library inwards the bundle
I went a footstep farther in addition to turned this into an npm package, which when added equally a developer dependency volition add together the next code to gulpfile.js.let copyDynamic = build.subTask('copy-dynamic-load-files', business office (gulp, buildOptions, done) { gulp.src('./node_modules/sharepoint-modern-script-editor-propertypane/bundles/editor-pop-up.min.js') .pipe(gulp.dest('./temp/deploy')) .pipe(gulp.dest('./dist')); done(); }); build.rig.addPostBuildTask(copyDynamic); What the code does is accept the editor-pop-up.min.js file in addition to re-create it over to 2 folders inwards the SPFx structure.
- /dist is for loading the script acre debugging
- /temp/deploy is where files are stored which are included inwards the .sppgk file
The higher upwards designing tin live used amongst whatever npm packet containing a pre-bundles .js file. You add together it equally a developer dependency, in addition to charge the script dynamically instead of referencing it amongst require or import statements.
Dynamically charge the library
SharePoint framework includes a course of education to attention amongst loading script dynamically, SPComponentLoader.loadScript. If you lot deploy files to a custom CDN you lot know where to charge the files from, but when included inwards the bundle itself you lot don’t actually know the URL where the spider web component subdivision is loaded from. It could live the tenant app catalog, site app catalog or via SharePoint Online CDN.To teach gibe of the script path I purpose a play a trick on to include images inwards a bundle described inwards a post yesteryear Waldek Mastykarz equally good equally inwards an number on sp-dev-docs. If you lot add together an picture to a folder inwards your solution in addition to reference it amongst require, you lot volition teach the path to that image, in addition to tin only strip off the filename.
private getScriptRoot(): string { const runtimePath: string = require('./1x1.png'); const scriptRoot = runtimePath.substr(0, runtimePath.lastIndexOf("/")); homecoming scriptRoot; } 
In the higher upwards picture I created a 1x1 pixel png file which takes 156 bytes. H5N1 pocket-size cost to pay to teach the URL. I' volition petition to teach the script root equally a native property.
Note: Pre-SPFx v1.5 you lot could teach the base of operations URL via the manifest object inwards the spider web component subdivision context. It’s even so there, but non exposed via the type Definition files, so makes it harder to locomote with.
Loading in addition to instantiating the constituent inwards the illustration of the script editor spider web component subdivision looks similar this:
const editorPopUp: whatever = await SPComponentLoader.loadScript(this.getScriptRoot() + '/editor-pop-up.min.js', { globalExportsName: "EditorPopUp" }); const element: React.ReactElement<IScriptEditorProps> = React.createElement( editorPopUp.default, { script: this.properties.script, title: this.properties.title, save: this.save } ); ReactDom.render(element, this.domElement); And that’s all at that topographic point is to it :)
Summary
When you lot create to a greater extent than in addition to to a greater extent than components inwards SPFx in addition to add together them on modern pages, full charge in addition to execution fourth dimension increased equally you lot add together to a greater extent than in addition to to a greater extent than tertiary political party dependencies inwards your projects. Having a critical heart in addition to mortal equally to what is needed inwards edit way vs. runtime way is 1 way to optimize the JavaScript footprint your constituent has on a page. Using libraries such equally Office UI Fabric in addition to moment tin chop-chop add together to the over all size, in addition to they all require processing fourth dimension on the page. One spider web component subdivision mightiness non live an issue, but when you lot add together v or 10 instances of the same part, it mightiness guide maintain an impact.I recommend reading Optimize SharePoint Framework builds for production which explains how you lot tin analyze what library adds size to your bundle.
Check out https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor in addition to https://github.com/wobba/sharepoint-modern-script-editor-propertypane for the code used inwards this post.
Questions in addition to Answers
Q: Why non charge the external script/component using require, similar to the picture bundling? The purpose of require is evaluated during packaging, which agency whatever script referenced using require volition live included inwards the original script bundle, non allowing a reduction inwards bundle size.Q: Why non reference the script using the externals department of config.json instead?
While this would allow you lot to charge the file separately it would live loaded on runtime amongst the spider web component subdivision or extension, thence non reducing the amount of script on the page.
Q: Can I purpose this method to charge other files except .js files?
In theory you lot tin purpose this method to add together whatever file you lot want, in addition to and so charge or reference them at volition – that live images, text files, fonts, vogue sheets etc. For images using require, mightiness live easier, but it’s all upwards to your needs.Thanks for reading : An Conduct A Opportunity Into Optimizing Sharepoint Framework Runtime Packet Sizes
