Bundle (Scaffolding) the SharePoint Framework (SPFx) WebParts into a single JS file

By this time, all of us would have created a lot of SPFx webparts. One interesting thing is, even if we have more than one webpart in a solution, while scaffolding, there are individual JS files got created which can be scaffolded into a single JS file.

As usual, let us see this by step by step demo. The steps at the high level are as follows.

1. Create a Solution called BundlingDemo by executing “yo @microsoft/sharepoint”

2. Add the WebPart WP1

3. Add the Second WebPart WP2.

4. The solution will look like below.

5. Let us do the Bundle by executing “gulp bundle –ship”

6. The output of this bundle commands, i.e., the deployable items will be available under temp\deploy folder.

7. If we could see, there are 2 JS files got created with each 8 KB. (As it is a blank webpart, this is a bare minimal size)

8. The two files got created, based on the value on the Config.JSON file. By default, the config.json will be as below.

 {
   "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
   "version": "2.0",
   "bundles": {
     "wp-1-web-part": {
       "components": [
         {
           "entrypoint": "./lib/webparts/wp1/Wp1WebPart.js",
           "manifest": "./src/webparts/wp1/Wp1WebPart.manifest.json"
         }
       ]
     },
     "wp-2-web-part": {
       "components": [
         {
           "entrypoint": "./lib/webparts/wp2/Wp2WebPart.js",
           "manifest": "./src/webparts/wp2/Wp2WebPart.manifest.json"
         }
       ]
     }
   },
   "externals": {},
   "localizedResources": {
     "Wp1WebPartStrings": "lib/webparts/wp1/loc/{locale}.js",
     "Wp2WebPartStrings": "lib/webparts/wp2/loc/{locale}.js"
   }
 }
 

9. Now, to make it as a single output JS file, we need to change the config.json as below.

 {
   "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
   "version": "2.0",
   "bundles": {
     "webpart-bundles": {
       "components": [
         {
           "entrypoint": "./lib/webparts/wp1/Wp1WebPart.js",
           "manifest": "./src/webparts/wp1/Wp1WebPart.manifest.json"
         },
         {
           "entrypoint": "./lib/webparts/wp2/Wp2WebPart.js",
           "manifest": "./src/webparts/wp2/Wp2WebPart.manifest.json"
         }
       ]
     } 
   },
   "externals": {},
   "localizedResources": {
     "Wp1WebPartStrings": "lib/webparts/wp1/loc/{locale}.js",
     "Wp2WebPartStrings": "lib/webparts/wp2/loc/{locale}.js"
   }
 }
 

10. Instead of having two components, I have clubbed the components entrypoint and manifest as a single component called webpart-bundles.

11. By this way, the output will be as follows.

12. We will get a single JS file with 12 KB in size.

Both the webparts JSON properties will be bundled into a single JS file.

The purpose of this is,

When we have these two webparts in the same page, there will be two JS files downloaded in the earlier version of code. But, after a proper bundling a single JS file will be downloaded for the page which will serve the Purpose of both the webparts.

Happy Coding,

Sathish Nadarajan.