Microsoft 365 Community Community Demos, 30 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Fast Serve with SharePoint Framework – speed up the bundling process

Description

In this 9-minute Developer focused demo, Sergei Sergeev introduces us to a command line utility, that uses the SPFx Fast Serve tool to speed up the gulp serve process (bundle). The tool adds necessary files to run your own webpack-based build with webpack dev server. Technically it's a custom webpack build, which produces the same output files as SPFx build pipeline, but much faster. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 30, 2020. Useful on pages with multiple webparts as it compiles only changed files.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• SPFx overclockers or how to significantly speed up the "gulp serve" command | https://spblog.net/post/2020/03/24/spfx-overclockers-or-how-significantly-speed-up-the-gulp-serve-command
• SPFx Fast Serve Tool | https://github.com/s-KaiNet/spfx-fast-serve

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

Yeah, just a quick introduction: my name is sergey sergeyev. Most of the time I work as sharepoint and microsoft, 365, developer and consultant also mvp under office development category and in this demo we are talking about. How can you speed up the performance of your gulp serve command?

A

The commands you use during sharepoint framework development, so I'm going to start with just a brand new hello world web part, so I'm going to run lots of, and this is by the way this is my web part. Probably you have seen it many times before so nothing special here.

A

Let me move this will do to the right side and open this one.

A

I'm going to add this web part to the workbench and now, when I change anything here in my code, let's say like this and when I save, then you see that in the console the sharepoint framework build pipeline, spins up the process of recompiling your code and producing the.

B

A

Sources out of your typescript and styles out from your from your code, so every time I save it again, spin up the same process and, finally, in the very end, it refreshes your browser so for a very basic hello world web part, it works quite nice quite fast.

A

However, the problem becomes evident if you have a large solution or even medium solution with lots of web parts, for example. Here let me go to this tab and run gulp surf again, and this is the sharepoint framework, modern search solution by the way, very, very great solution if you need modern search in your websites.

A

So here we have. We have six web parts and you see that this gulp serve gulf surf command is still executing, so we should wait for a few more seconds until it will be completed.

A

Okay ready now, I'm going to add a web part, let's say verticals, and now I'm going to do exactly the same, I'm going to. Let me move it again to the right side and this one to the left side and let me open a circle, verticals container and change anything here like this. One, for example, and click save, but now again this uh sharepoint framework build pipeline, builds or compiles. Let's call it compiles the project, however, this time it works a lot slower simply because we have six web parts.

A

We have a lot of other code services providers etc. That is why only now we have this browser refresh event. So if you take a look at the digest numbers here, we have we see that typescript took seven seconds. Then the puck took 11 seconds so uh one second here in total, it took approximately 20 seconds to to see our changes right after we save our source file. So if I ever did it again, then the whole process starts from the very beginning.

A

So that's okay, let's, let's wait uh until it will be finished so a few more seconds and finally, our page is refreshed yeah. So how can you improve the performance in this case, so you can do that by using s perfect fast, serve, that's a a special tool which which increase the speed of this yelps or serve process.

A

However, to run it, you should execute npm script. Npm run serve command, so the very first step it executes the same bundle process. This is necessary because, before running this custom serve command. We need some some essential objects which come from a default build.

A

That is why, again, let's, let's wait for maybe four ten more seconds yeah, so the pack is finished, and now we have our custom surf command running.

A

uh It also takes some time, but fortunately only for the first run. So again, it's I don't know, maybe 5 10 seconds more. Let me close this one, and now it is completed successfully. Let me add again search verticals so this time, if I modify anything in the source code and click save, then it also compiles the sources.

A

However, this time it works a lot faster, so for for the first time it was four seconds, but all consequent compiles will be a lot faster. It will be. You see it's it's less than one second so, and you also can see how fast now the the browser and how fast it refreshes the page when I save anything in the in the sources, so I click save and then in less than a second, it refreshes the page.

A

So this is how uh it increases the speed of gulf serve. But how can you add it to your project to your solution? That's very simple, because everything you need is you need to install spfx fast, serve npm, install this prefix fast serve globally, then, when you're ready, simply execute as prefix fast serve command, because that's a cli inside your root, sharepoint solution, folder like this and then as perfect fast serve, will do everything for you.

A

Basically, under the hood, it creates a custom webpack based build which produces exactly the same output as the default sharepoint framework build. So it also modifies your package.json adds some dependencies. That is why you should run npm install and when you're ready, you should execute npm run serve in order to use gulp serve gulp serve on steroids.

A

So when I run it on the default hello world, sorry hello, world web part, then you see that now. If I change anything here, then the changes will be reflected almost immediately, so it's even even faster than for hello world web part, then how it works. Under the hood, as I said, it creates a custom webpack based build. Basically, it adds this webpack.js file, which contains essential configuration plugins for web pack, etc, etc.

A

Also, it spins up a custom dev server, and this is basically- and this is how it works, and if we open package.json, we also have custom surf command which, at the first step, it executes our bundle process and then it spins up the webpack dev server using custom web up the pack.js file.

A

If you want to see more documentation, then the documentation is available at github here and basically there are a lot of documentation here, faqs and if you have any any troubles, please resonation and I will try to to help you to resolve this issue and additionally, what are other cool features of s perfect fast serve. Is that and why it is fast, because all calculations are done in memory, so we do not have any additional steps or additional tasks.

A

Also, it's incremental and compiles only changed files. So not everything and type checking and linking are asynchronous so yeah. This is it from my site. Thank you very.

B

Much cool tool- uh and I encourage folks check that out- that's another great thing to add into your toolbox of sharepoint framework development really exciting to see stuff like that uh coming out of the community and great work uh sergey on that the time savings is really really impressive.