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 …

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

目次1 はじめに2 検証環境3 Ionicプロジェクト作成4 PDFダウンロード、IndexedDB保存を実装5 実行してみる はじめに PDFをHTTPダウンロードするとHDDに保存されるか、外部ビ …

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

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

Android、iPhoneが向いている方向をWeb地図上で表現してみる(leaflet.js使用)

前回Javascriptでコンパス機能を実装して、Android、iPhoneの背面が向いている方角が数値(0~360:0が北)で分かるようになりました。 One IT Thing  9 P …

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

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

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

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

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。