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

原文轉錄自: 用 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 之下來測試安裝速度

$ npm cache clean
$ npm install

結果: 93.00 秒

$ yarn cache clean
$ yarn install

結果: 42.80s

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

$ npm install

結果: 13.00 秒

$ 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

本帖已被设为精华帖!
本帖由系统于 7年前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 14

不爽,原来用 npm install 的间隙还能沏一杯茶,做套眼保健操。用了 yarn install 还没站起来就完成了。:worried:

7年前 评论
leo

yarn默认使用facebook的registry,国内是被墙的,经测试yarn可以直接使用npm的registry,所以直接换上淘宝的源即可

yarn config set registry 'https://registry.npm.taobao.org'

7年前 评论

不爽,原来用 npm install 的间隙还能沏一杯茶,做套眼保健操。用了 yarn install 还没站起来就完成了。:worried:

7年前 评论

前端的各种工具和框架真是更新换代太快,从grunt到gulp再到webpack,从jquery时代再到MVVM时代,现在Npm难道也要淘汰?:worried:

7年前 评论
appleboy

誰叫 npm 一堆 issue 不解,只能靠 Facebook 團隊來解決這問題,不過看到官方 npm blog,他們好像也是不以為意。

7年前 评论
appleboy

@Macken Yarn 提供了 Offline Install Package,解決了網路 Issue。增加部署速度 ...

7年前 评论
leo

yarn默认使用facebook的registry,国内是被墙的,经测试yarn可以直接使用npm的registry,所以直接换上淘宝的源即可

yarn config set registry 'https://registry.npm.taobao.org'

7年前 评论
appleboy

@leo Yes 沒錯,可以自己換國內 registry 就可以了。

7年前 评论
appleboy

@zhuzhichao 之前用 mac 安裝,mac 風扇鬼哭神嚎,換了 yarn 後,奇怪怎麼一下子就裝好了,風扇才開始要加速就停止了 XD

7年前 评论

@appleboy 反正每次看到 npm install 我的内心是拒绝的,经常要重复好多次

7年前 评论

好强呀,运维吗。。

7年前 评论

lock 文件机制也很棒 :+1:

7年前 评论

太棒了,之前有些包一直安装失败,现在终于成功了,而且速度杠杠的

7年前 评论
appleboy

目前已經有 0.16 版本了,大家可以試試看

Support auth for private npm packages

7年前 评论
lijinma

使用了,喜欢 lock 文件。

7年前 评论
monkey

已转入 yarn 的怀抱

7年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!