One IT Thing

IT業界を楽しむ為の学習系雑記

html5

Angular、React、Vueプロジェクトを新規作成した時に生成されるリソース規模比較

投稿日:2019年8月3日 更新日:

アンチウィルスのディスクフルスキャンが日に日に遅くなっていく・・・


一年後には丸一日掛かっても終わらなくなり、仕事終わりにかけて行ったフルスキャンが翌日まだ頑張っている。

この原因、ちょこちょこ作っているNode.jsを使った検証用プロジェクトがファイルを大量にnpm installするのが一役買っているだろうと思い、メジャーなフレームワークが初期状態でどれくらいのリソース量が有るのか調べました。

検証用途で新規にAngular、React、Vueプロジェクトを作った時、

  • 生成されるファイル数
  • 生成された総ファイルの行数

がどれくらいになるのか検証します。

検証方法

環境

  • Windows 10(WSL)
  • Node.js 10.16.0
  • Angular 8.1.0(7.2.0)
  • React 16.8.6
  • Vue 2.6.10

検証方法

各種フレームワークで新規作成したプロジェクトルートで、以下のコマンドを実行します。

コマンドプロンプトから「bash」でubuntuを起動してから検証開始。

総ファイル数計測

 find ./ -type f | wc -l | printf "%'d\n" $(cat)

総ファイル行数計測

 find ./ -type f | xargs cat | wc -l | printf "%'d\n" $(cat)

計測開始

Angular 8.1.0

プロジェクト新規作成。

npm install @angular/cli
ng new プロジェクト名
ng run start

依存関係

 "dependencies": {
    "@angular/animations": "~8.1.0",
    "@angular/common": "~8.1.0",
    "@angular/compiler": "~8.1.0",
    "@angular/core": "~8.1.0",
    "@angular/forms": "~8.1.0",
    "@angular/platform-browser": "~8.1.0",
    "@angular/platform-browser-dynamic": "~8.1.0",
    "@angular/router": "~8.1.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.0",
    "@angular/cli": "~8.1.0",
    "@angular/compiler-cli": "~8.1.0",
    "@angular/language-service": "~8.1.0",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

総ファイル数

find ./ -type f | wc -l | printf "%'d\n" $(cat)
34,869

総ファイル行数

find ./ -type f | xargs cat | wc -l | printf "%'d\n" $(cat)
6,176,335

React 16.8.6

プロジェクト新規作成。

npx create-react-app my-app
cd my-app
npm start

依存関係

 "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
}

総ファイル数

find ./ -type f | wc -l | printf "%'d\n" $(cat)
21,217

総ファイル行数

find ./ -type f | xargs cat | wc -l | printf "%'d\n" $(cat)
2,447,323

Vue 2.6.10

プロジェクト新規作成。

npm install -g @vue/cli
vue create my-project
cd my-app
npm run serve

依存関係

 "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },

総ファイル数

find ./ -type f | wc -l | printf "%'d\n" $(cat)
21,217

総ファイル行数

find ./ -type f | xargs cat | wc -l | printf "%'d\n" $(cat)
2,447,323

検証結果を比較

Angular8.1.0がもっともファイル数と行数を喰う結果に。Angularは一個入れれば事が済むフルスタックなので当然ですかね。

Angular 8.1.0

ファイル本数:34,869
ファイル行数:6,176,335

React 16.8.6

ファイル本数:27,800
ファイル行数:2,696,583

Vue 2.6.10

ファイル本数:21,217
ファイル行数:2,447,323

因みにAngular 7.2.0は

ファイル本数:26,838
ファイル行数:3,769,221

7 → 8でリソースがバコーンと増加したようです。

Node.jsプロジェクトはHDDに優しくない

1パターンの検証を3つのフレームワークで試した時に生成される総リソース数は、

ファイル本数:83,886
ファイル行数:11,320,241

10パターン検証したらハードディスクには83万ファイル増え、その行数は1.1億行。年期が入って来た開発PCなら、そりゃあウィルススキャンも必死に頑張るはずです。

ある日突然HDDが「自分もうダメっす」と弱音を吐いて動かなくならないように、大事なプロジェクトはリモートgitに退避、不要なプロジェクトは削除しておいた方が良いかも知れません。

依存するモジュールの機能も増加していきますし、開発コミュニティもモジュール単位で多岐に渡る為、Javaのように一致団結して削減していく動きは取り辛いでしょうから、Node.jsプロジェクトのリソースインフレは今後も続くんじゃないかなと予想しています。

-html5
-, , ,

執筆者:

関連記事

Chrome75に実装された「Web Share API Level 2」を使ってみた

(2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした) Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremote …

Angular、React、VueのDL数をnpmtrends.comで調べる

目次1 対象読者2 3つの内どれを選ぶべきか3 npmtrends.comについて4 比較結果5 それぞれの長所6 で、どれを採用するべきか 対象読者 これからフロントエンドの勉強をしようと考えている …

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示(後編)

目次1 はじめに2 ビューワ機能を提供してくれるnpmモジュールを選別する3 実装開始3.1 ng2-pdfjs-viewerを使えるようにする3.2 PDFビューワコンポーネントを作る3.3 Hom …

History APIを使ってIonic(3以前のSPA)でブラウザの戻るボタンやAndroidバックキーを押すと前サイトに戻ってしまう件に対応する

Ionic2や3ではまだAngular Routerを採用していなかったので、ページ遷移をしてもブラウザ履歴が積まれず、Androidのバックキーやブラウザの戻るボタンを押すとサイトに入ってくる前のペ …

IndexedDBにストアしたオブジェクトのキー値を部分的に更新する

目次1 はじめに2 課題3 より良い方法4 まとめ5 補足 はじめに IndexedDBは「key : value」でレコードを保存するキーバリューストアです。 バリューには「単値」または「Javas …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。