聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

七月 21, 2017

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» Node.js 8 搭配 npm 5 速度

yarn-kitten-full 這個月 Node.js 釋出 8.0 版本,搭配的就是 npm v5.0.0 版本,上一篇寫到如何透過 Yarn 指令移除 devDependencies 內的 Package 套件,減少 node_modules 大小,有網友提到那 npm 5 的速度為何?其實筆者已經好久沒有用 npm 了,但是有人提問,我就立馬來測試看看 npm vs yarn 的速度,詳細數據可以參考此專案說明。測試方法如下

設定環境

底下是測試環境版本
  • node version: v8.0.0
  • npm verison: 5.0.0
  • yarn verison: 0.24.6

初次安裝 (沒有任何快取)

先把 node_modules 刪除,及系統相關 Cache 目錄都移除
$ npm cache verify
$ rm -rf ~/.npm/_cacache/
$ time npm install
npm 花費時間: 1m43.370s
$ yarn cache clean
$ time yarn install
yarn 花費時間: 1m1.707s

保留系統快取目錄

執行完第一次安裝後,我們把 node_modules 移除後再安裝一次試試看
$ rm -rf node_moduels
$ time npm install
npm 花費時間: 0m38.819s
$ rm -rf node_moduels
$ time yarn install
yarn 花費時間: 0m24.219s

保留系統快取目錄及 node_modules

最後保留 node_modules 目錄,再執行一次安裝
$ time npm install
npm 花費時間: 0m11.216s
$ time yarn install
yarn 花費時間: 0m0.954s

結論

大家可以發現,雖然 npm 改進不少速度,但是 Yarn 還是優勝許多,這邊可以總結,已經在使用 yarn 的,可以繼續使用,尚未使用 yarn 的開發者,可以嘗試使用看看。另外 npm 5 現在執行 npm install –save 會預設產生出 package-lock.json 跟 yarn 產生的 yarn.lock 是類似的東西,除非專案內已經有 npm-shrinkwrap.json,否則 npm 會自動幫專案產生喔。詳細情形可以看 Replace metadata + fetch + cache code。npm cache 指令可以看此文件

» 減少 node_modules 大小來加速部署 Node.js 專案

yarn-kitten-full 相信 Node.js 開發者現在大部分都在使用 Yarn 了吧?如果還不知道或無法體會 Yarn 帶來的好處可以參考之前寫的一篇『用 Yarn 取代 Npm 管理 JavaScript 套件版本』,帶你體會 yarn install vs npm install 的速度差異。本篇最主要會介紹在部署 Node.js 專案都需要把 node_modules 壓縮一起丟到遠端伺服器 (假設你不是用 Docker 部署),這時候來聊聊怎麼減少 node_modules 大小。

傳統 npm 作法

Yarn 尚未出來時,可以透過 npm prune --production 的方式來將 devDependencies 內的套件全部清除
$ npm install
$ .... 處理其他事情
$ npm prune --production
$ .... 最後將 node_modeuls 打包

yarn 作法

原本我是把 yarn 搭配 npm prune --production,在早期的 yarn 版本似乎不會有問題,但是發現最新版本 npm prune 會把非 devDependencies 內的套件也一併清除,雖然 yarn 沒有提供 prune 指令,但是有個 flag 可以使用,效果跟 npm prune 一樣,就是加上 --production 這樣就可以降低不少大小,所以部署流程會變成底下
$ yarn install
先是安裝全部套件 (像是 babel-cli),接著透過 babel 轉換程式碼,最後在下底下指令
$ yarn install --production
這時候就會把 babel 相關套件全部移除,最後將 node_modules 打包就可以了。

結論

除了上述過程外,在 CI/CD 流程內,務必設定 yarn 快取目錄在專案內。
$ yarn config set cache-folder .yarn-cache
跑完部屬流程後,可以把 .yarn-cachenode_modules 同時打包,等到下次跑 CI/CD 時會加速不少喔。

十月 13, 2016

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

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

yarn-kitten-full 新一代戰神 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

support:

biggo.com.tw

A Django site.