The SharePoint Framework (SPFx) uses a different style of development than what most traditional SharePoint developers are familiar with. Traditional SharePoint developers are used to .NET and the package manager NuGet. Microsoft has elected to use the more Node.js friendly approach for the toolchain and for package acquisition with SPFx.
You create a new web part project using the Yeoman generator. I blogged about using Yeoman a while ago to create Office Add-ins … check that post out if you want to learn more about Yeoman is. The SPFx Yeoman generator first scaffolds out the project folders and files first and then runs npm install to get all the packages needed for the development and build process.
NPM is the tool that is most commonly used to acquire packages from https://www.npmjs.com . In the context of SPFx, it’s used to download the build tools, SharePoint workbench, gulp tasks, type definitions and other dependencies you need when building your client web part. While not unlike NuGet package restore, you end up getting a lot more dependencies because in Node.js, things aren’t compiled to binary DLL files among a few other things. While NPM has a concept of global packages, the SPFx and many of it’s dependencies are designed to be run with local dependencies. This means that with each new client web part you create, you’ll have anywhere from 300MB - 375MB in your node_modules folder… and this takes time to download.
In a recent test I ran on a connection that tested around 40MB download & 5MB upload, after creating the web part and deleting the node_modules, it took NPM about 91 seconds to download all dependencies… see for yourself:
There’s a long backstory as to the challenges Node.js developers have with dependencies, reliability and working offline with NPM that I’ll spare you in this post. Earlier this year, Yarn was announced ( blog post here with more details on what Yarn is & how it works ). Yarn is a collaborative effort by Facebook, Google, Tilde & Exponent. The idea was to replace NPM with a more scalable, faster & reliable package manager. From the user perspective, it works the exact same way. It adopted the same commands as NPM so you can do the simple npm install with yarn install.
How does it stack up? See for yourself! I ran the same test above using the same connection with Yarn instead of NPM. This time, downloading the entire node_modules folder took just 53 seconds… a 41% improvement in speed!
But that’s just the first run… now things get interesting. See, when Yarn downloads packages, it caches them locally. The next time a project… any project… needs that package, it will pull from cache rather than re-download the package like NPM does.
How does this impact SPFx client web part projects? After using Yarn to get the packages for my web part, I deleted the node_modules folder and ran it again. This time it pulled packages from my local cache and was finished in 26 seconds, a 71% improvement in speed!
What if I create a second web part on my laptop? Does it help there? You bet! Here is Yarn downloading dependencies for a totally different web part project. It too only took about 26 seconds
So how can you leverage this in your SharePoint Framework client web part projects? Easy… first go get Yarn: https://yarnpkg.com/en/docs/install
Then, anywhere you would normally use NPM, just use Yarn. If you type npm install jquery –save to get jquery, then type yarn add jquery –save.
So we have a challenge. Today the Yeoman SharePoint Generator always runs npm install after scaffolding a project up. What I do is hit CTRL + C to kill the generator when I see NPM start downloading packages. Then I type yarn install to get the packages.
Using this process, you can get a complete web part scaffolded up with all dependencies in about 45 seconds:
There is an
asking Microsoft to support a
--no-install flag on the generator so you could do something like:
yo @microsoft/sharepoint --no-install # answer the yeoman prompts yarn install
It seems like they are going to do it, but make your voice heard. Click the thumbs up / upvote on the issue opened by @gavinbarron to show you want this too! It’s a little annoying as they sort of have this flag already in the generator, but they aren’t respecting it when it comes to the last step.