Microsoft MVP Logo

Since publishing this post, I've learned from commenter Elio Struyf that there is an issue being tracked on when using Yarn on Windows for some nested dependencies. One of the dependencies affected is fsevents (a package intended only for macos). This is an optional dependency within something that SPFx's build tools requires. When using Yarn on macOS, it ignores the dependency, but on Windows, it apparently tries to install it which is causing an error. This is a popular issue that's being tracked (#2116 & #2142) so I'm sure it will get resolved soon... in fact it looks resolved in Yarn v0.18.0 which is currently in pre-release.

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:

Enter Yarn - NPM Replacement

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!

Yarn Really Shines After the First Run

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

Replacing NPM with Yarn for New SPFx Client Web Part Projects

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.

What about Yeoman SharePoint Generator?

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:

We Need Your Help! Tell Microsoft to Support a --skip-install Flag!

There is an open issue asking Microsoft to support a --skip-install or --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.

Comments powered by Disqus