You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/dynamic-loading.md
+5-10Lines changed: 5 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -5,11 +5,12 @@ ms.date: 08/27/2018
5
5
ms.prod: sharepoint
6
6
---
7
7
8
-
# SharePoint Framework guidance on dynamic loading of packages
8
+
# Dynamic loading of packages in SharePoint Framework
9
9
10
10
When building SharePoint Framework components it is common to reference third party libraries such as [Office UI Fabric React](https://www.npmjs.com/package/office-ui-fabric-react) for layout controls or [moment](https://www.npmjs.com/package/moment) for time handling. Each of these libraries will add to the byte size of the bundled JavaScript file for the component. As an example, moment adds ~250KB, a considerable amount.
11
11
12
-
*Note: A _bundle_ is one or more JavaScript fragments and style sheets, put into the same `.js` file. When you package an SPFx solution, all your code is usually bundled into one `.js` file. Splitting a bundle, is the operation of generating multiple `.js` files instead of one, so that they can be loaded individually.*
12
+
> [!NOTE]
13
+
> A _bundle_ is one or more JavaScript fragments and style sheets, put into the same `.js` file. When you package an SPFx solution, all your code is usually bundled into one `.js` file. Splitting a bundle, is the operation of generating multiple `.js` files instead of one, so that they can be loaded individually.*
13
14
14
15
Depending on the component, these third party libraries may or may not be used in all parts of the components lifecycle. Maybe they are only used in edit mode or in the property pane, or maybe they are needed once a user clicks a link or button in the component.
15
16
@@ -46,7 +47,7 @@ In an SPFx project with multiple web parts or extensions a typical structure in
46
47
47
48
In the above configuration both web parts are included in the same JavaScript file or bundle. This means that if a user adds one of the web parts to a page, both are actually loaded. For scenarios where the web parts almost always coincide on the same page, this is fine, as it reduced load time. If however the web parts are used separately, then it is better to have them split into two files to reduce what is loaded on the page.
48
49
49
-
This is easily achieved by changing `config/config.json` so that each web part is bundled as a separate JavaScript file.
50
+
This can be achieved by changing `config/config.json` so that each web part is bundled as a separate JavaScript file.
50
51
51
52
```json
52
53
{
@@ -177,10 +178,4 @@ In your main web part file create a function named `loadPropertyPaneResources.`
177
178
178
179
## Summary
179
180
180
-
When building SPFx solutions consisting of several web parts or extensions, or if building an SPFx web part with a lot of code and which uses third party libraries, consider analyzing the resulting bundle size, and use the strategies defined above to split the code into multiple smaller bundles, where each one is loaded only when needed - thus reducing the time it takes for an end-user to load and execute a modern page.
181
-
182
-
## See also
183
-
184
-
-[An even better bundle optimization method for SPFx using webpack dynamic imports (techmikael.com)](https://www.techmikael.com/2018/08/an-even-better-bundle-optimization.html)
185
-
-[Sample code from Modern Script Editor web part](https://github.com/SharePoint/sp-dev-fx-webparts/blob/dev/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts#L39)
186
-
-[Access to script root of a web part and dynamic loading of resources (github)](https://github.com/SharePoint/sp-dev-docs/issues/2388)
181
+
When building SPFx solutions consisting of several web parts or extensions, or if building an SPFx web part with a lot of code and which uses third party libraries, consider analyzing the resulting bundle size, and use the strategies defined above to split the code into multiple smaller bundles, where each one is loaded only when needed - thus reducing the time it takes for an end-user to load and execute a modern page.
0 commit comments