角度2 - コンポーネントごとに1つの大きなCSSファイルまたは1つのファイル

Question

角度2では、アプリケーションのスタイルをいくつか選択できます。いくつかのタスクランナー（例：Gulp）を使用するか、すべてのコンポーネントにAngular 2 styleUrls: ['myfile.css']を使用して、1つの大きなminified .cssファイルを作成する方が良いかどうかを推測しようとしています。どのようにして、ブラウザのパフォーマンスは向上するでしょうか？約100個のコンポーネントがあるとしましょう。そのため、ブラウザに100個のcssファイルをロードするか、たとえば、セクション内の1つの大きなcssファイルをロードする必要があります。

あなたはどう思いますか？

Answer 1

個人的に（私のプロジェクトでは）大きなサイズの小さなファイルではなく、大きなサイズのファイルを使用していました。アプリケーションのさまざまなコンポーネントで両方を試してみたところ、中央の1つのファイルがわかりました。

Answer 2

私は個人的にはのファイルを分離したと感じるでしょうは魅力的に動作します。

PROS：あまりにも多くのCSSを見てする必要があります

1. ：
   1. まあ構造化コード
   2. 別居cssファイル
   3. は

   CONSをロードするには少し時間がかかります小さな変更を加えながら。

2. デバッグが難しくなる（重大なバグの場合）
3. 多くのファイルがキャッシュされます。

巨大な1つのファイル。

PROS：すべての

1. 一つのファイル。
2. メンテナンスが簡単です。

CONS：

1. 複雑すぎます。
2. どのようなクラスまたはIDがどのコードセグメントに属しているのかわかりません（正しく名前が付けられていない場合）
3. コードが酷いと、状況が悪化する可能性があります。
4. LOADに時間がかかりすぎる。

誰もが独自の視点を持っています。あなたはthisの記事を読んでみたいです。

Answer 3

ステップ1ヨは、あなたが1つのファイルにすべてのあなたのスタイルを連結検討すべきでわずか数KBSの場合は...全CSSファイルの重みが、後に縮小さとG-Zipは、圧縮されたどのくらいかを決定する必要が

...あなたは常にクライアントのマシンにそのファイルをキャッシュできるので、ユーザーがページを読み込むたびにファイルをダウンロードする必要はないことを忘れないでください。

ステップ2

それだけの価値なら...あなたは、特定のコンポーネント...あなたが他のコンポーネントで再利用するつもりはないされているルールのCSSルールを分離する必要があります。

一度これを行う次の2つのオプションがあります：あなたのコンポーネントがあまりにも多くのCSSルールを必要とする場合は「あなたがwouldnので、私は、それを維持することは困難になるだろう、50の以上の行を言うでしょう...

をあなたのIDEや任意の自動字下げ機能からIntelliSenseを得る... styleUrls: ['myfile.css']を使用して、独自のファイルにこれらのプロパティを持ち、維持しやすく、CSSプリプロセッサを使用してCSSファイルを生成している場合...これはより良いアプローチになります。

あなたがSPAで初めて、このコンポーネントをロードするたびにアプリがあなたのサーバーHTTP-REQUESTからそのCSSファイルを要求されることに注意してください。

---

コンポーネントが唯一あなたが styles: ['h1{color:red}']インラインを使用したい場合がありスタイリングのためのいくつかの行を必要とする場合、それはあなたに別のHTTPリクエストを作成するアプリを防ぐので、...これは、より速くロードしサーバーは、スタイルを取得する