Microsoft 365 Community Community Demos, 13 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SPFx optimizing bundles with code splitting chunks

Description

In this 10-minute Developer - focused demo, David Warner shows viewers how to optimally split, combine and name .js files for your bundles to speed up initial page load and debugging as well as to provide actionable telemetry. See how to split your web parts functionality into multiple .js files and use WebpackChunkName to append friendly names to default GUID like .js file names. Files are loaded as needed - at time of execution, i.e., with a button click. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 13, 2020.

Demo Presenter: David Warner (Catapult Systems) | @DavidWarnerII

Supporting materials:
• Blog post - Dynamic SPFx Package Bundling | http://warner.digital/dynamic-spfx-package-bundling/
• Documentation - Dynamic loading of packages in SharePoint Framework | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/dynamic-loading/
• Blog post - SPFx Optimized Package Bundling – Chunk Names – Part 1 – Custom Bundle Names | http://warner.digital/spfx-optimized-package-bundling-chunk-names-part1/
• Repo - Dynamics Bundling & Loading of SPFx Packages | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/js-dynamic-bundling-libraries

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

uh So for those that are new in the community, this is my contact. Information. Don't hesitate to reach out to me if you'd like to collaborate on anything today we are going to talk about the spfx optimized package bundling and controlling the javascript chunk names that come with that. So what we're going to cover is what is a javascript chunk and for those that are not familiar, perhaps with the overview of the basic package.

A

Bundling we'll have an overview on that, and then we have a demo of how you can customize those chunk names and then we'll talk about the benefits all right. So what is a javascript chunk now, if you're old, like I am, and a fan of the goonies, you may be thinking of captain chunk from goonies right, but that is not. We love chunk there, but we love even more javascript chunks. Javascript chunks are the javascript.

A

That's output from your spfx control, whether it's an extension or a web part, and so when you generate them, you get a javascript or one or more javascript files that will run. Obviously your web parts, so the default package bundling. You can see here on the screen is when you include and import things such as something like we'll see in the demo, such as jquery or moment, both very basic libraries uh and- and there are better libraries that we're going to use or can use, but we're going to go ahead and demo.

A

Those because they're familiar for everyone, whether you're, new uh or you've, been in the community and developing for a long time. But what happens is all of that functionality gets bundled into a single javascript file.

A

So even if it's not executed or needed on page load, for example, you may not need the libraries until you click a button that functionality is still included on the page load, so that payload is a little heavier and you you may pay for that right away, even though you don't need to optimize dynamic package, bundling allows you to split that functionality into multiple javascript files.

A

So, as we see here, this is an example of importing a jquery, but in our case for this particular sample, we don't need jquery until it's actually called upon by a button click. So we can see that it's converted out to a separate file and now that 100k original file payload on page load is now only 14 kilobytes. So we can see that the load of the original file is smaller, so we're going to have a better execution and load time and it reduces that initial load of the solution.

A

I've done the video you can see that there at the uh at the url, if you'd like. So, let's look at a demo, uh we'll examine the default package chunk names. What happens uh now, we'll modify them as well to be asynchronously imported. So if you're not familiar asynchronously, it just simply means that we want it to go call in those libraries at a time later on demand, while other things on our solution are processing.

A

So essentially we want it to occur in the background kind of when we click that button and then we're going to see how we can combine multiple async imports into a single chunk bundle all right. So, let's dive in so here. Let me set the context for what you see on your screen. I've got an out of the box web part here on the left in vs code, my command, prompt to that exact demo uh web part on the right and we're looking at the actual distribution files of our javascript chunks.

A

Now what we're looking at in this case is a pre-bundled version of if we had simply done this, if we just simply imported moment or jquery and then used it, and we can see I'm using it here when we click a button, load, async, bundles and we're just simply executing on moment and using jquery to do a very simple content injection right. But what happens? Is we get this initial payload on the load of the page that we don't need? We don't need jquery and moment at that time, so we're going to close this.

A

This is just a glimpse: we're going to open the real file and we're going to see what we're doing here with optimize package, bundling we're able to actually dynamically and on demand pull in our libraries. Now I put them into a separate file here for jquery and moment, and you don't have to do that right.

A

I do that because I like the uh I like the organization of it, the separation- I can add additional functional methods here if I need to do more than just simply import and return jquery, but it's functional for me and that's kind of how I like it, so we're able to call them in on demand. So what? What does that look like, though, when I bundle it?

A

So let me just delete these, so we don't get multiple bundles and we're going to go ahead and execute a gold bundle ship based on our values that are saved right here now in that web packs. What we're going to see is something similar to what we saw in the slides, we're going to see that all of our bundles are now chunked out into separate files. Our original payload right here is down to only 15k and then just because we know jquery is bigger than that. It's 87k, but moment is huge.

A

Very big library is 259k, but if you look at the names of these files, well, it's a little confusing right. It adds somewhat of a grid to them and just prefaces them with a name. So if you were doing debugging, if you were doing telemetry, uh checking and reporting, you wouldn't really know which is which it'd be hard to know, there's a better way we can use, what's called webpack chunk names to identify exactly what these files are by their file name.

A

So what I'm going to do in our await import right here is I'm going to go ahead and paste in a very simple what looks like a comment? This is used by webpack, but it's actually an instruction, and it's saying instead of just giving this a default name. I want you to give this webpack chunk, name something that includes import jquery.

A

So now we'll go ahead and do that as well on our moment, we'll save that and we'll rebundle, let's delete our files and see what the result is, what the result will be. I can give you a preview. Is it will include the name that we just gave it right, so we're going to see when it's finished packing and bundling right there. We now see our files have our specific names in them.

A

We know that this is moment right because the size- and we see that by the name the same with jquery and 87k, pretty cool. This helps with telemetry. It helps with debugging. We know. What's loaded, you see these other ones here, because those are simply the uh additional files that type your files that do actually the importation. So don't need to worry too much about those, but these are the primary things right now you may be saying well hold on a second.

A

What, if I'm only using those together in this case, I am only using moment and jquery together for my particular use case, so I don't necessarily want them to always be two separate files. Is there any way that we can have them optimized, bundled right so that they can be pulled in asynchronously, but also be in the same name, meaning the same file? Yes, so all we do again very simple change.

A

Is we change our chunk name to the same thing, so I'm going to go ahead and just change that name here to import jquery and moment. I'm going to do that for both of them, so they both now are referencing the same name: let's delete our bundles and re-run, the gulp bundle, and when this is done, what we'll see is a combined chunk file for us that uses the same name?

A

So when the webpack is done here, we see the bundling is done, and now we see one single file that includes both of our libraries together, and we know that by way of the name. So what does that functionally? Look like in a real world scenario? Well, let's go ahead and jump over to just this quick web part. This is exactly the same web part very simple, we'll go ahead and refresh, and I'm going to go ahead and bring up the network, and we know that it has vendors in it right.

A

So I'm just going to uh filter here to vendors, I'm going to eliminate now what happens? Is I'm going to go ahead and load? My bundles when I click this button and it's going to display the current date? So we know it's working, so I click that we see the current date and there is our bundle having been imported asynchronously at the time. We need it as opposed to just on demand or on load, even if we don't necessarily need it immediately.

A

So let me go back to our slides and what are the benefits for us? Improve debugging makes it easier to find out exactly what files we're working with right, because, instead of seeing those random names, we're able to see uh custom names that we're then able to key on and identify and know exactly what's going on, improve telemetry right, so you can use custom names, you can build reports on that, it helps identify, what's being used, etc and of course you can use these in library components.

A

As you know, I'm a big fan of library components here are some useful links, I'll paste them in the chat window after the tutorial or after the demo, but there's a microsoft documentation on dynamic loading, a couple of video tutorials and then we do have a sample in the pnp repo that does show how to do and take advantage of the optimized dynamic, bundling and including those webpack chunk. Names are as simple as the small little comment that we saw inserted all right. Well, that's it for my demo. So I appreciate your time.