On my previous project, I’ve noticed that a shrinkwrap file speeds up the build time in CI environment. So my target now is the comparison of standard yarn installation for packages, and npm installation with established npm-shrinkwrap json.
As you may know during the first launch yarn creates a lockfile stating all the concrete versions for each package. So does npm, but only by demand using command `npm shrinkwrap`. It has several options, e.g. `dev` which is useful for CI test purpose. In order to check my aforementioned hypothesis, I’d measure timing for full packages installation. As starting point any modern application goes, I’ve picked react boilerplate https://github.com/kriasoft/react-app . There are two main considerations in order to make measurement more predictive and repetitive. First, network constraint should be set due to avoid too fast or too lossy connections. The second point, we need to make sure that nothing is cached between measurements.
Concerning network, I’ve run all the tests on home WiFi with no concurrent application (no torrents, multiple browser tabs etc.), and set constraints of downloading channel via Network Conditioner preference panel for MacOS. Chosen working preset: LTE, stating maximum 50Mbs and delay as 50ms with no explicit packets drops.
Test cases are pretty straightforward: running `npm i` vs running `yarn`. The third option is running `npm i` with ready npm-shrinkwrap.json file. The secret sauce is in clearing packages caches, and in setting proper flags for the commands. Measure tool is a standard `time` CLI. So full scenarios for all three cases are as follows:
All technical details about environments: Macbook Pro 13, Mac OS Sierra 10.12.3, npm v4.1.2 yarn v0.21.3, just in case..
So, after several launches I’ve got very interesting, even unexpected results. npm installation is magically slow.
real 2m45s +/- 20s
user 0m40s +/- 4s
sys 0m11s +/- 1s
No fresh news, yarn is pretty rapid
real 0m41s +/- 5s
user 0m39s +/- 4s
sys 0m18s +/- 2s
npm with shrinkwrap file is almost as good as yarn
real 0m57s +/- 4s
user 0m50s +/- 2s
sys 0m23s +/- 2s
I can’t explain such a drastic difference between these two modes of npm. And I didn’t find a good explanation, especially in official documentation.
There are two main further questions. Why do we need yarn? And how to manage shrinkwrap files manually? But it is a good topic for another article ;) Stay tuned!
