• Introducing Turbo: 5x faster than Yarn & NPM, and runs Natively in-browser 🔥
  • Written by Eric Simons
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Cherry
  • Proofreader: Meng Meng, Noahziheng

Turbo: Five times faster than Yarn and NPM. You can run 🔥 in the local browser

Note: This is part of my talk at Google Mountain View School on December 6th, welcome to join us!

After four months of hard work, I’m excited to announce Turbo! 🎉

Turbo is an extremely fast NPM client originally created for StackBlitz:

  • The installation speed is at least five times that of Yarn and NPM 🔥

  • ** Reduces the node_modules size to two orders of magnitude 😮 **

  • Multilayer redundancy for production-level reliability 💪

  • Working entirely in a Web browser, with a lightning-fast development environment ⚡️

Actual speed of NPM package installation using Turbo in StackBlitz.com

Why is that?

When we first started StackBlitz, our goal was to create an online IDE that would make you feel as fast as the wheels of a supercar: all you needed was the joy of responding to commands instantaneously.

Unlike Turbo, NPM and Yarn are local. Because NPM and Yarn are designed to handle a large number of dependent backend code bases, local binaries and other resources are required. They can be installed at the speed of a supercar and a truck. But front-end code rarely has such large-scale dependencies, so is that a problem? Of course, these dependencies still enter the installation process as devDependencies and sub-dependencies and are still downloaded and referenced. Will form that infamous black hole: node_modules.

Why NPM doesn’t work in native browsers is the crux of the matter. Parsing, downloading, and extracting a typical Megabyte (or gigabyte) front-end project in the node_modules folder is a challenge that is not suited to doing so in a browser. Furthermore, this demonstrates why server-side solutions to this problem are slow, unreliable, and costly.

So, if NPM itself doesn’t run in the browser, what if we build a new NPM client from the ground up?

Solution: a smarter, faster package manager built specifically for the Web 📦

Much of Turbo’s speed and efficiency is achieved by using the same techniques as modern front-end applications, using snappy Performance — tree-shaking, lazy loading, and plain XHR/ FETCH requests with GZIP compression enabled.

Retrieve files on demand 🚀

Turbo cleverly retrieves only the files needed for main, Typings, and other related files rather than downloading the entire package. Whether it’s a personal project or a large one, this relieves a staggering load.

RxJS vs. RealWorld Angular total payload size

So what happens if your important file is not referenced by the main file? For example, a Sass file that Turb lazily loads on demand and keeps for future use works in a similar way to Microsoft’s new GVFS Git Protocol.

Robust caching with multiple failover strategies 🏋️

We recently introduced a Turbo-featured CDN where all NPM packages are in a JSON request packaged using GZIP, greatly increasing package installation speed. This concept is similar to NPM’s tarball, which merges all files and compresses them. However, Turbo’s cache intelligently contains only the files you need for your project and compresses them.

Each Turbo client runs independently in the browser, and if the package file you reference is in our cache, it is automatically downloaded on demand directly from the extensive CDN resources provided by jsDelivr. What if jsDelivr can’t be accessed? Don’t worry, it will be automatically replaced with Unpkg CDN, providing three layers of ultra-reliable standalone package installation tool 👌.

Lightning-fast dependency solutions ⚡️

To ensure a minimum payload size, Turbo uses a custom parsing algorithm to actively resolve common package versions where possible. This is also surprisingly fast and redundant: the no-service version of the parser has the right to use the entire data set of NPM in memory and parse any package.json file in 85ms. Turbo had any problems connecting to the serverless version of the parser, and even when it failed, it gracefully ran intact in the browser and retained all the metadata necessary to resolve the problem.

Completing dependency management on the client side also opens up new and exciting possibilities, such as installing missing peer dependencies with a single click 😮:

Because no one reads these NPM warnings in console output 😜

Evidence that Turbo can be used on a large scale 📈

Turbo is currently able to reliably handle millions of requests per month with negligible overhead. We are excited to announce that the Angular team at Google recently chose StackBlitz to support instances in their documentation, which is used by millions of developers.

Technical Preview 🙌

Turbo is dependent on StackBlitz.com, and through the technical preview phase we will be running a lot of tests and speed measurements to verify performance and reliability improvements. Every feedback you give is critical, so if you encounter problems in use, Don’t hesitate to raise issues and talk to us in our Discord community 🍻

While Turbo was originally designed for product-grade use, Turbo has found a few online places in real-world ides (Stackblitz), and in the community people have started to devise a way to use Turbo to make script types equal to modules (cool if there is one!!). We can’t wait to see the other amazing things people come up with, so once our API gets better, we’ll make it fully open source on our Github (along with the rest of StackBlitz) for people around the world to use 🤘.

Finally, we thank the Angular team at Google for betting on our technology, and the Google Cloud team for sponsoring their amazing service for Turbo! ❤ ️

As always, feel free to Tweet me

Any questions, feedback, ideas, etc., please contact me at @ericsimons40 or @stackblitz 🙂

Also, if you’re interested in supporting our work, please consider subscribing to Thinkster Pro! We are creating a new series on how we created Turbo and StackBlitz, as well as modifying our directory 🙂

I want you to watch my Mountain View video on December 6th.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.