21.12.2018 03:45
bezrukovyra 0 2 Источник
Давным давно появился Yarn, который позиционировался супер быстрое таврение Facebook в замену npm.

Если вы работаете над крупным проектом, то время восстановления пакетов является важным фактором скорости разработки и build'а проекта на ci.

Было решено проверить, стоит ли использовать Yarn в замену Npm. поскольку пакетов достаточно много и на слабых build agent'ах, восстановление может достигать 2х минут.

image

Итак, тестовый сценарий достаточно прост:
— Параллельный запуск двух восстановлений [npm i и yarn inatall] из одинаковый packages.json.

Содержимое package.json
{
  "version": "1.0.0",
  "name": "mir_scada2",
  "private": true,
  "dependencies": {
    "angular": "^1.7.2",
    "angular-animate": "^1.7.5",
    "angular-bootstrap-checkbox": "^0.5.0",
    "angular-bootstrap-contextmenu": "1.2.0",
    "angular-file-upload": "2.5.0",
    "angular-minicolors": "0.0.11",
    "angular-moment": "1.3.0",
    "angular-moment-picker": "0.10.2",
    "angular-sanitize": "^1.7.2",
    "angular-touch": "^1.7.2",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-grid": "^4.6.4",
    "angular-ui-tree": "^2.22.6",
    "angularjs-color-picker-vanilla": "0.0.4",
    "bootstrap": "4.1.3",
    "bootstrap3-dialog": "^1.35.4",
    "chart.js": "2.7.3",
    "copyfiles": "^2.1.0",
    "core-js": "2.5.7",
    "d3": "5.7.0",
    "dom-to-image": "2.6.0",
    "eonasdan-bootstrap-datetimepicker": "4.17.47",
    "excel-builder": "^2.0.3",
    "file-saver": "^2.0.0",
    "html2canvas": "1.0.0-alpha.11",
    "jquery": "3.3.1",
    "jquery-contextmenu": "^2.7.1",
    "jquery-mask-plugin": "^1.14.15",
    "jquery-minicolors": "^2.1.10",
    "jquery-validation": "^1.18.0",
    "jquery-validation-unobtrusive": "^3.2.11",
    "jquery.cookie": "1.4.1",
    "jquery.easing": "1.4.1",
    "jquery.splitter": "0.27.1",
    "jsrender": "1.0.0-rc.70",
    "jszip": "^3.1.5",
    "linq": "^3.1.1",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "pdfjs-dist": "^2.0.943",
    "popper.js": "1.14.4",
    "respond": "0.9.0",
    "rxjs": "6.2.0",
    "rxjs-compat": "6.3.3",
    "signalr": "^2.4.0",
    "svg.js": "^2.6.6",
    "ui-select": "^0.20.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@types/angular-signalr-hub": "1.5.32",
    "@types/angular-ui-bootstrap": "0.13.47",
    "@types/bootstrap3-dialog": "1.35.0",
    "@types/chart.js": "2.7.40",
    "@types/d3": "5.0.0",
    "@types/d3-shape": "1.2.4",
    "@types/dom-to-image": "2.6.0",
    "@types/flot": "0.0.31",
    "@types/html-webpack-plugin": "3.2.0",
    "@types/jquery": "3.3.22",
    "@types/lodash": "4.14.117",
    "@types/mini-css-extract-plugin": "0.2.0",
    "@types/node": "10.12.14",
    "@types/signalr": "2.2.35",
    "@types/sweetalert": "1.1.28",
    "@types/webpack": "4.4.21",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "5.2.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "cache-loader": "^1.2.5",
    "cli": "1.0.1",
    "css-loader": "1.0.1",
    "cssnano": "4.1.7",
    "exports-loader": "0.7.0",
    "expose-loader": "0.7.5",
    "file-loader": "^2.0.0",
    "filemanager-webpack-plugin": "2.0.5",
    "hard-source-webpack-plugin": "0.11.0",
    "html-loader": "0.5.5",
    "html-webpack-bom-plugin": "0.0.2",
    "html-webpack-plugin": "4.0.0-alpha",
    "imports-loader": "0.8.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.5",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.4.0",
    "speed-measure-webpack-plugin": "^1.2.3",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "1.1.0",
    "ts-node": "7.0.1",
    "typescript": "3.1.3",
    "webpack": "4.23.1",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-notifier": "1.7.0"
  },
  "scripts": {
    "mir_web_components@latest": "npm i mir_web_components@latest -save",
    "globalInstall": "npm i -g webpack webpack-cli cross-env karma typescript@3.1.3",
    "webpack": "tsc --lib es5,dom  webpack.config.ts && cross-env NODE_OPTIONS=--max_old_space_size=4000 webpack --mode development --config ./webpack.config.js"
  },
  "-vs-binding": {
    "~BeforeBuild": [
      "install",
      "webpack"
    ]
  }
}



Первый результат установки пакетов удивил: npm 77 секунды, yarn 109 секунд.



Второй результат оказался похожим: npm 76 секунд, yarn 102 секунды



Также интересным показался размер скаченных пакетов: npm 350mb vs yarn 255mb



Одним из минусов выявленных в ходе работы с yarn оказалась, что при удалении ручками пакетов из node_modules, команда yarn install не восстанавливает удаленные пакеты.



В ходе мини тестов не удалось выявить победу yarn кроме случая восстановления[1] пакетов.

[1] Плюсом Yarn можно отнести быстрое восстановление пакетов, т.е. если пакеты не были удалены ручками, а просто изменились версии в package.json.

Буду рад злобным комментариям о том, что всё сделано неправильно и конструктивным предложениям)

Всем хорошего дня

Комментарии (0)