Bundling multiple SharePoint Framework(SPFx) webparts into one common JS file
Introduction
While building multiple webparts on the same page, we need to consider multiple factor which will improve performance of the page significantly.
Purpose
Purpose of this article is to showcase how multiple webparts can be bundled together to provide one common JS file instead of generating independent JS files for each webpart.
Getting Started
In this article, we will take an existing example from another article where there are two webparts on the same page. The solution can be downloaded from here.
In this solution there is a ListItem webpart and an author webpart which resides on the same page.
Once we have build the package and installing and the required node modules / Dependencies, We will run the below command
gulp bundle --ship
This command will generate the necessary files required for the webparts & this can be viewed under temp/deploy
Here we can see that there are separate JS files which has been generated for each webpart.
Looking at the config.json file under Config folder, we can see how the file module are defined to be generated.
Here we will change the code & combine all the component into one, so that, only one JS file is generated for both webparts name list-items-web-part.
Once we save the changes made and run the below command
gulp bundle --ship
We can see that only one JS file for both the webpart is created. Also, if we notice the size of previous files were listitem.js (285 KB) & authors.js (196 KB). Instead now we have only one JS file liteitem.js (290 KB) which will serve he purpose of both the webparts.
Conclusion
Thus, we saw how multiple client side webparts can be bundled into single JS file which improves page performance.