用 Yarn 取代 Npm 管理 JavaScript 套件版本

新一代戰神 Yarn 終於在昨天出爐了，Yarn 跟 Npm 一樣都是 JavaScript 套件版本管理工具，但是 Npm 令人詬病的是安裝都是非常的慢，快取機制用起來效果也不是很好，所以 Yarn 的出現解決了這些問題，透過 Yarn 安裝過的套件都會在家目錄產生 Cache (目錄在 ~/.yarn-cache/)，也就是只要安裝過一次，下次砍掉 node_modules 目錄重新安裝都會從 Cache 讀取。Yarn 詳細的功能架構可以參考 Facebook 發表的 Yarn: A new package manager for JavaScript，本篇不會教大家怎麼使用 Yarn，因為指令實在是太容易了，可以參考官方提供的如何從 npm 轉換到 yarn，底下則是來測試比較兩者安裝套件的速度。

前置準備

你可以用任何機器會筆電來做底下測試，或者是直接拿此 Dockerfile 在個人環境先產生乾淨的 Image，Dockerfile 內容很短，也可以從底下複製

FROM node:6.7.0

RUN curl -o- -L https://yarnpkg.com/install.sh | bash && \
  echo "" >> ~/.bashrc && \
  echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.bashrc

CMD /bin/bash

請準備好底下版本

node version: v6.7.0
npm verison: 3.10.3
yarn verison: 0.15.1

可以自己拿任何專案的 package.json 或是下載我放在 Github 的 package.json 來做測試。

測試 package 安裝速度

第一階段就是沒有任何 Cache 之下來測試安裝速度

1
2

$ npm cache clean
$ npm install

結果: 93.00 秒

1
2

$ yarn cache clean
$ yarn install

結果: 42.80s

第二階段就是保留 node_modules 目錄，在下一次安裝

`1`	`$ npm install`

結果: 13.00 秒

`1`	`$ yarn install`

結果: 0.16 秒 (注意連 1 秒都不到 XD)

結論

	npm	yarn
install without cache	93000ms	42800ms
install with cache	13000ms	`160ms`

上面表格將數據整理好，如果要搞 Devops 至少可以省下將近 13 秒的時間，如果是 Local 團隊開發省下的時間更多了。結論就是大家趕快從 npm 轉到 yarn 吧，yarn 出來不到一個禮拜已經超過 1 萬多個 Star 了，看到開發團隊內包含了許多 Google 前端大神，這讓我更放心的轉換到 Yarn。寫完本篇才發現官方也有提供效能比較表。本文提到的數據及檔案都有一併放到 Github Repo

前置準備

測試 package 安裝速度

結論

See also