Angularプロジェクトごとに生成される膨大な数のファイル

594

Angular用のシンプルなHello Worldアプリを起動したいと思いました。

公式クイックスタートの指示に従ってインストールすると、プロジェクトに32,000個のファイルが作成されました。

これは間違いであるか、何かを見逃していると思ったので、angular-cliを使用することにしましたが、プロジェクトを設定した後、41,000ファイルをカウントしました。

どこで私は間違えましたか？私は本当に本当に明白な何かを見逃していますか？

javascript  angular 
— モシェシャハム
ソース
98
NPMを使用するプロジェクトでは、これは正常です。
— Everettss
115
@hendrixは、私の展開（Googleアプリエンジン）で許可されているファイルが10Kのみであるためです
— Moshe Shaham
49
この質問とその回答に対する投票数に興味がある人は、これでHNのトップページが作成されました。news.ycombinator.com/item?id=12209028
— ceejayoz
50
@hendrix-.DS_Storeファイルもgitにコミットすると思います。
— Martin Konecny
61
「Hello Worldアプリが機能していれば、すべてがうまくいく」というのは、特に学習している人にとって、従うべき哲学ではないと思います。OPは、なぜこれほど多くのファイルが作成されたのかを疑問視するのにぴったりです。例自体は5つのファイルのみを参照しています。正直なところ、出力に含まれる文字数よりも多くのファイルがあるアプリケーションには、質問する必要があります。
— Shawn

回答:

362

設定に問題はありません。

Angular（バージョン2.0以降）は、開発にnpmモジュールと依存関係を使用します。これが、膨大な数のファイルが表示される唯一の理由です。

Angularの基本セットアップには、トランスパイラー、タイピングの依存関係が含まれていますが、これらは開発目的でのみ必要です。

開発が完了したら、このアプリケーションをバンドルするだけで済みます。

アプリケーションをバンドルbundle.jsすると、サーバーにデプロイできるファイルは1つだけになります。

'transpiler'は単なるコンパイラです。@ omninonsenseが追加してくれてありがとう。

— ブシャンガデカール
ソース
7
また、通常、テストデータと、依存関係とその依存関係などのテストおよびビルドツールも提供します。
— Benjamin Gruenbaum
63
「トランスパイラー」は単なるコンパイラです。
— omn​​inonsense
32
しかし、バイトコードまたはマシンコードではなく、別の言語にコンパイルします
— Hunter McMillen
32
@HunterMcMillenバイトコードやマシンコードは別の言語です。「トランスパイラー」という用語には、「コンパイラ」以外の意味はありません。
— Brandon Buck
76
関係するすべてに関して、意味論の議論がOPの質問に本当に関連しているとは思えません^^
— Dan Pantry
144 
                                Typical Angular2 Project

NPMパッケージ                       ファイル（開発）                   実際のファイル（展開） 

@angular                       3,236                             1
rxJS                           1,349                             1*
core-js                        1,341                             2
typings                        1,488                             0
gulp                           1,218                             0
gulp-typescript                1,243                             0
lite-server                    5,654                             0
systemjs-builder               6,470                             0
__________________________________________________________________
Total                         21,999                             3

*： bundled with @angular

[ バンドルプロセスについてはこちらをご覧ください⇗ ]

— アンキット・シン
ソース
24
-3合計を行わなかったために与えられたと思いますが、今私は持っています:)
— Ankit Singh
1
実世界のファイルとはどういう意味ですか？
— イェイマン
1
@yeahman "実世界のファイル"は、プロジェクトがデプロイされているとき、または本番環境にあるときのファイルの数です。
— Maarti 2018年
また、サイズカウントは3ファイルのみですが、それらは巨大になる可能性があります（Webの場合）
— pdem
51

開発構成に問題はありません。

プロダクション構成に問題があります。

「Angular 2プロジェクト」または「JSに基づく任意のプロジェクト」を開発する場合、すべてのファイルを使用でき、すべてのファイルを試すことができ、すべてのファイルをインポートできます。ただし、このプロジェクトを提供する場合は、すべての構造化ファイルを結合し、不要なファイルを取り除く必要があります。

これらのファイルを組み合わせるためのオプションはたくさんあります。

— ハリケーン
ソース
2
サーバー上でファイルを連結する必要はありません（引用が必要です）。せいぜい、トランスパイラーを使用するだけです。
— Dan Pantry
1
@DanPantry Transpilersは、ソースからソースへのコンパイラです。「X」から「JS」にしか変更できないと思います。ファイル数は同じです。
— ハリケーン
1
..はい、しかし私はあなたの要点を知りません。私のポイントは、おそらくサーバーコードを（ファイルを連結してファイルサイズを小さくすることによって）縮小しようとするべきではないということです。async / awaitなどの出血機能を使用している場合は、コードでせいぜいBabelを使用する必要があります。
— Dan Pantry、
2
@DanPantry私はあなたに同意します。しかし、質問では、「私のデプロイ（Google App Engine）では10Kファイルしか許可されないため」と述べています。これらの状況では、ファイル数を最小限に抑える必要があります。
— ハリケーン
4
私はあなたに同意しますが、OPにはXY問題があるようです
— Dan Pantry
30

いくつかの人がすでに述べたように：node_modulesディレクトリー（パッケージのNPMロケーション）内のすべてのファイルは、プロジェクトの依存関係（いわゆる直接依存関係）の一部です。これに加えて、依存関係は独自の依存関係などを持つこともできます（いわゆる推移的な依存関係）。数万のファイルは特別なものではありません。

アップロードできるのは10'000ファイル（コメントを参照）だけなので、私はバンドルエンジンを使用します。このエンジンは、すべてのJavaScript、CSS、HTMLなどをバンドルし、単一のバンドル（または指定した場合はさらにバンドル）を作成します。あなたのindex.htmlはこのバンドルをロードし、それだけです。

私はwebpackのファンなので、私のwebpackソリューションはアプリケーションバンドルとベンダーバンドルを作成します（完全に機能するアプリケーションについては、https：//github.com/swaechter/project-collection/tree/master/web-angular2-を参照してください）例）：

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

webpack.config.js

var webpack = require("webpack");
var path = require('path');

var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

/*
 * Configuration
 */
module.exports = {
    devtool: 'source-map',
    debug: true,

    entry: {
        'main': './app/main.ts'
    },

    // Bundle configuration
    output: {
        path: root('dist'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
    },

    // Include configuration
    resolve: {
        extensions: ['', '.ts', '.js', '.css', '.html']
    },

    // Module configuration
    module: {
        preLoaders: [
            // Lint all TypeScript files
            {test: /\.ts$/, loader: 'tslint-loader'}
        ],
        loaders: [
            // Include all TypeScript files
            {test: /\.ts$/, loader: 'ts-loader'},

            // Include all HTML files
            {test: /\.html$/, loader: 'raw-loader'},

            // Include all CSS files
            {test: /\.css$/, loader: 'raw-loader'},
        ]
    },

    // Plugin configuration
    plugins: [
        // Bundle all third party libraries
        new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),

        // Uglify all bundles
        new UglifyJsPlugin({compress: {warnings: false}}),
    ],

    // Linter configuration
    tslint: {
        emitErrors: false,
        failOnHint: false
    }
};

// Helper functions
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [__dirname].concat(args));
}

利点：

  • 完全なビルドライン（TSリンティング、コンパイル、縮小など）
  • デプロイ用の3つのファイル->少数のHttpリクエストのみ

短所：

  • ビルド時間が長い
  • Http 2プロジェクトに最適なソリューションではありません（免責事項を参照）

免責事項：これは、各Httpリクエストのオーバーヘッドを最小限に抑えるため、Http 1. *の優れたソリューションです。index.htmlと各バンドルに対するリクエストのみがあり、100〜200ファイルに対するリクエストはありません。現時点では、これが方法です。

一方、Http 2はHttpオーバーヘッドを最小限に抑えようとするため、ストリームプロトコルに基づいています。このストリームは双方向（クライアント<->サーバー）で通信でき、そのため、よりインテリジェントなリソースのロードが可能です（必要なファイルのみをロードします）。ストリームにより、HTTPオーバーヘッドの大部分が排除されます（HTTPラウンドトリップが少なくなります）。

しかし、それはIPv6と同じです。人々が実際にHttp 2を使用するようになるまでには数年かかります

— Swaechter
ソース
1
ただし、OPにangular-cliは、すでにバンドラー（同じ推奨Webパック）に付属している使用方法が記載されているため、必要ありません。
— mattarau 2017年
2
@mdentinhoはい、より新しいリリースで。しかし、2016年にはSystemJSとCLIが採用されました（喜んで現在webpackを入手しています）
— swaechter 2017年
21

Angular CLIによって生成されたプロジェクトからdist（配布可能の略）フォルダーをデプロイしていることを確認する必要があります。これにより、ツールでソースコードとその依存関係を取得し、アプリケーションを実行するために必要なものだけを提供できます。

ng build --prodを介した本番環境のビルドに関して、Angular CLIに問題がある、またはあったと言われている

昨日（2016年8月2日）、ビルドメカニズムをブロッコリー + systemjsから本番環境ビルドを正常に処理するWebpackに切り替えたリリースが行われました。

これらのステップに基づいて：

ng new test-project
ng build --prod

私は見ていますdistのフォルダサイズ1.1メガバイトを越えて14個のファイルここに記載されています：

./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js

注：現在、角度cliのwebpackバージョンをインストールするには、実行する必要があります...npm install angular-cli@webpack -g

— ブロッコ
ソース
12

ここで説明されているように、誰もがAhead-of-Timeコンパイルについて言及していないようです：https : //angular.io/docs/ts/latest/cookbook/aot-compiler.html

これまでの私のAngularの経験では、AoTはロード時間がほとんどなく、最小のビルドを作成します。そして、ここでの質問が最も重要である-あなたは本番にいくつかのファイルを出荷する必要があるだけです。

これは、テンプレートが「Ahead of Time」でコンパイルされるため、Angularコンパイラが製品ビルドに同梱されないためであると思われます。HTMLテンプレートのマークアップが、元のHTMLにリバースエンジニアリングするのが非常に難しいJavaScript命令に変換されるのを見るのも非常にクールです。

開発サイズとAoTビルドのAngularアプリのダウンロードサイズ、ファイル数などを示す簡単なビデオを作成しました。

https://youtu.be/ZoZDCgQwnmQ

デモのソースコードは次の場所にあります。

https://github.com/fintechneo/angular2-templates

そして、他のすべての人がここで言ったように、開発環境に多くのファイルがあっても問題はありません。これが、Angularに付属するすべての依存関係、およびその他の多くの最新のフレームワークとの関係です。ただし、ここでの違いは、本番環境に出荷するときに、いくつかのファイルにパックできることです。また、gitリポジトリにこれらの依存関係ファイルのすべてが必要なわけではありません。

— ピーター・サロモンセン
ソース
8

これは実際にはAngular固有ではなく、ツールにNodeJs / npmエコシステムを使用するほとんどすべてのプロジェクトで発生します。

これらのプロジェクトは、node_modulesフォルダー内にあり、直接の依存関係を実行する必要がある一時的な依存関係です。

ノードでは、エコシステムモジュールは通常小さいので、自分で開発するのではなく、必要なもののほとんどをモジュールの形でインポートする傾向があります。これには、有名な左パッド機能などの小さなものを含めることができます。演習としてではないのに、なぜ自分で書くのですか

したがって、多くのファイルがあることは実際には良いことです。つまり、すべてが非常にモジュール化されており、モジュールの作成者は他のモジュールを頻繁に再利用しました。このモジュール化の容易さは、おそらくノードエコシステムが急速に成長した主な理由の1つです。

原則としてこれで問題が発生することはありませんが、Google App Engineのファイル数の制限に達したようです。その場合、node_modulesをApp Engineにアップロードしないことをお勧めします。

代わりに、アプリケーションをローカルでビルドし、バンドルされたファイルのみをGoogle App Engineにアップロードします。ただし、App Engine自体にはビルドしません。

— Angular University
ソース
8

Angular CLIの新しいバージョンを使用している場合 ng build --prod

ファイルが少ないdistフォルダーが作成され、プロジェクトの速度が向上します。

また、角度クリの最高のパフォーマンスでローカルでテストするために使用できます ng serve --prod

— ジャライオザ
ソース
6

Angular CLIを使用している場合は、プロジェクトを作成するときに常に--minimalフラグを使用できます 

ng new name --minimal

フラグを付けて実行したところ、ng build --prod24,600 個のファイルが作成され、212 KBのdistフォルダーが作成されました

したがって、プロジェクトで噴水が必要ない場合や、何かをすばやくテストしたい場合は、これが非常に便利だと思います

— SebOlens
ソース
5

最近、angular cliを使用して新しいプロジェクトを作成し、node_modulesフォルダーが270 mbだったので、これは正常ですが、angular worldのほとんどの新しい開発者がこれを疑問視し、有効であると確信しています。単純な新しいプロジェクトの場合は、依存関係を少し削減することは理にかなっています;）すべてのパッケージが依存しているものを知らないことは、特に初めてcliを試す新しい開発者にとって、少し不安になります。加えて、ほとんどの基本的なチュートリアルでは、必要なエクスポートファイルのみを取得するための配置設定については説明していません。Angularの公式Webサイトで提供されているチュートリアルでさえ、単純なプロジェクトをデプロイする方法について話しているとは思えません。

node_modulesフォルダーが原因であるようです

— マッガイ
ソース
4

以下は、角度のあるプロジェクトでより多くのスペースを必要とするものの比較です。 ここに画像の説明を入力してください

— ジャガデシャNH
ソース
3

ファイルシステムがシンボリックリンクをサポートしている場合は、少なくともこれらすべてのファイルを隠しフォルダーに委任するtreeことができます。これにより、などのスマートツールはデフォルトでそれらを表示しません。

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

このために隠しフォルダーを使用すると、これらがビルド関連の中間ファイルであり、リビジョン管理に保存する必要がない、またはデプロイメントで直接使用する必要がないことを理解するのにも役立ちます。

— nobar
ソース
私のブレッドクラムは、ゴーン古いを持っていますが、ここではそれが参照するものです： web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/...
— nobar
2

何も問題はありません。これらは、package.jsonで言及したすべてのノードの依存関係です。

gitハブプロジェクトの一部をダウンロードした場合は注意してください。他の依存関係が多数あり、実際には角度2の最初のHello Worldアプリには必要ありません。

  • 角度依存関係があることを確認してください-rxjs -gulp -typescript -tslint -docker
— Piyush Anwekar
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.