フロントエンドのパフォーマンス最適化-リソースの統合と圧縮

1リソースの統合と圧縮

リソースの統合=> httpリクエストの数を減らす

リソースの圧縮=>要求されたリソースのサイズを減らす

2.圧縮

2.1 HTML圧縮

HTMLコード圧縮は、テキストファイルで意味のあるこれらの文字を圧縮することです（つまり、コードを編集する場合）。ただし、スペース、タブ、改行などのHTMLに表示されない文字、およびHTMLなどの他の意味のある文字コメントも圧縮できます。

2.2 Css圧縮

• 無効なコードの削除

• CSSセマンティックマージ

2.3 Jsの圧縮と混乱

• 改行、スペースなどの無効な文字を削除する

• コメントを削除

• 一部の変数の長さの短縮、無効なコードの最適化など、コードのセマンティックの削減と最適化

• コード保護、js圧縮により、コードがわかりにくく、読みにくくなる

• ログを削除

一般に、CSSおよびJS圧縮の意味はHTMLよりも意味があります

2.4圧縮方法

1. オンラインのWebサイト圧縮を使用する
2. node.jsによって提供されるhtml-minifierなどのいくつかの圧縮ツールを使用して、htmlを圧縮します。
3. grunt、glut、webpackなどのビルドツールを使用します。
4. 現在、それらのほとんどはwebpackを使用してビルドおよび圧縮しています

3ファイルのマージ

上記のように

融合しない欠陥

1. ファイル間に挿入されたアップストリーム要求があり、N-1ネットワーク遅延が増加しています
2. パケット損失の影響が大きい
3. プロキシサーバーを通過するときに切断される場合があります

合併後の問題

1. 最初の画面のレンダリングの問題は、マージされたファイルがマージ前よりも大きくなることです。レンダリングがjsに依存している場合、jsリクエストが遅い場合、影響があります。
2. キャッシュの無効化の問題マージされた複数のjsのいずれかに変更があると、マージされたファイルに変更が発生し、マージされたjsが失敗します。前の例ではa.jsが失敗するだけです。

最適化する方法

• パブリックライブラリはファイルをマージし、ビジネスコードをマージします。パブリックライブラリはあまり変わりません
• 異なるページのマージ、単一ページアプリケーション、ページへのルーティング時、このページのみをロード
• ブラウザの同じドメイン名での同時リクエストの数は制限されており、この点でマージが必要です
• gzipを開く