Hi,
I am creating web parts that will go on a same page. The web part count can be from 10-15. I am using SPFx with React and have added Office Fabric UI React to the web parts as recommended in MSDN. Now when I bundle the web parts the size of the bundled files are large. For example, the smallest file is of 104 KB. So now if add 10-15 web parts on the same page, my page will be very slow.
I need to reduce the bundle size of the files. Hence I followed this link to use office fabric react an external link to the web parts. I added the following code in the externals in config.json:
"office-ui-fabric-react": {
"path": "https://unpkg.com/office-ui-fabric-react@6.143.0/dist/office-ui-fabric-react.min.js",
"globalName": "Fabric"
}
Now when the files are bundled, the size reduces from 104 KB to 45 KB. This was a good reduction.
I deployed the web parts to SharePoint but the office fabric did not load. The web parts were throwing following error:
Uncaught ReferenceError: React is not defined
So in order to remove the error I thought of adding the react CDN path to the page. I did this on classic site using Script Editor web part and the web part worked!
To add the same CDN path to the Modern UI we created a SPFx extension and installed it to SharePoint. But when I added the web parts to the page they threw the same error: "React is not defined". I tried adding the CDN paths first in the page head so that the CDN files load before the fabric file. But this did not succeed.
I then added the CDN path in the external property of config.json so that they may load in sequence. But on doing so the bundling process failed and the console threw the following error:
Error - [copy-assets] External "react" is specified both as a linked package in the node_modules dependency tree and as an external in in the config.json file. Remove one of the external references. Only one external reference type is allowed per
external package.
So now my challenge is to reduce the bundle size of the Office Fabric UI React Web Part files. Has anyone faced the same issue? Is there any way to reduce the bundle size of the web parts?
Regards,
Nishant
