An Fifty-Fifty Improve Parcel Optimization Method For Spfx Using Webpack Dynamic Imports

An Fifty-Fifty Improve Parcel Optimization Method For Spfx Using Webpack Dynamic Imports.

last post I ventured into how you lot dynamically tin strength out charge script resources inward your SPFx spider web business office or extension. Typically you lot powerfulness convey parts solely needed inward edit mode, or parts solely used inward surely sentiment scenarios. By non including everything inward the SPFx package you lot volition cut down loading fourth dimension together with page bootstrapping of your solution.

For example, if you lot locomote a lot of Office UI Fabric components or an external library similar moment, therefore your overall package size, or downloaded .js file increase a lot. If those components are non ever needed, loading them dynamically at volition is a ameliorate solution.

And, it’s therefore easy! SPFx uses spider web pack to do the bundle, together with webpack allows for something called dynamic imports. And this is such a golden nugget – sitting at that topographic point without anyone knowing :)

Instead of having an import disputation at the altitude of your code like

import ScriptEditor from './components/ScriptEditor'; 

you charge it dynamically inward your code when needed like

const editorPopUp = expression import(     /* webpackChunkName: 'scripteditor' */     './components/ScriptEditor' ); 

The crux hither is the comments business office /* webpackChunkName: ‘scripteditor’ */ which volition brand surely anything inward that tsx/ts file volition live wrapped upward inward it’s ain .js file, loaded when this describe of piece of job of code executes.

That means, refactoring your code to charge pieces dynamically is real very real easy. I convey updated the modern script editor spider web business office to charge the editor this way. And the practiced thing, you lot don’t larn an extra re-create of react, therefore the dynamic slice is smaller compared to my previous solution.

A big thank you lot to Pat Miller @ MSFT who clued me onto this solution - https://github.com/SharePoint/sp-dev-docs/issues/2388

Note:

If your SPFx projection has “module” : “commonjs” instead of “esnext” inward tsconfig.js which SPFx v1.5+ projects have, you lot postulate to add together the next to the altitude of your file:

declare var System: any;

and therefore locomote System.import, instead of only import. If not, everything goes into the same bundle.

Thanks for reading : An Fifty-Fifty Improve Parcel Optimization Method For Spfx Using Webpack Dynamic Imports

FacebookTwitterGoogle+

Related Post