大規模な JavaScript アプリを管理および展開するためのベストプラクティス

https://stackoverflow.com/questions/15390

08-06-2019
|

質問

中規模の JavaScript アプリケーションを管理するための標準的な方法にはどのようなものがありますか?私が懸念しているのは、ブラウザーのダウンロード速度と、開発の容易さと保守性の両方です。

私たちの JavaScript コードは、大まかに次のような「名前空間」になっています。

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

現時点では、Web アプリケーション上のすべてのビジネスロジックを処理するための 1 つの (アンパックされ、ストリップされていない、可読性の高い) JavaScript ファイルがあります。さらに、jQuery といくつかの jQuery 拡張機能があります。私たちが直面している問題は、 永遠に JavaScript コード内で何かを検索しようとすると、ブラウザーにはまだダウンロードするファイルが 12 個も残っています。

いくつかの「ソース」JavaScript ファイルがあり、それが最終的に 1 つの圧縮された JavaScript ファイルに「コンパイル」されるのはよくあることでしょうか?他に便利なヒントやベストプラクティスはありますか?

解決

私が効果的だと感じたアプローチは、(Java、C# などで行うのと同じように) クラスごとに個別の JS ファイルを用意することです。あるいは、ナビゲートしやすい場合は、JS をアプリケーションの機能領域にグループ化することもできます。

すべての JS ファイルを 1 つのディレクトリに配置すると、サーバー側環境 (PHP など) でそのディレクトリ内の各ファイルをループして、 <script src='/path/to/js/$file.js' type='text/javascript'> すべての UI ページに含まれるヘッダーファイル内。JS ファイルを定期的に作成および削除する場合、この自動読み込みは特に便利です。

運用環境にデプロイする場合は、それらすべてを 1 つの JS ファイルに結合し、サイズを抑えるためにそれを「縮小」するスクリプトが必要です。

他のヒント

また、Google のを使用することをお勧めします。 AJAX ライブラリ API 外部ライブラリをロードするため。

これは、主要な JavaScript ライブラリをバンドルし、常に圧縮バージョンを使用することで展開、アップグレード、軽量化を容易にする Google 開発者ツールです。

また、プロジェクト内でこれらのライブラリファイルをダウンロード、コピー、保守する必要がなくなるため、プロジェクトがよりシンプルかつ軽量になります。

このように使用します:

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Flickr で有名な Cal Henderson による、Vitamin に関する優れた記事があります。CSS と JavaScript の配信を最適化する方法について説明しています。 http://www.iamcal.com/serving-javascript-fast/

単なるサイドノード - Steve はすでに指摘しましたが、JS ファイルを実際に「縮小」する必要があります。JS では、空白は実際に重要です。数千行の JS があり、不要な改行だけを削除すると、すでに約 1K が保存されます。要点は理解できたと思います。

この仕事にはツールがあります。また、「縮小」/削除/難読化された JS を手動で変更しないでください。一度もない！

私たちの大規模な JavaScript アプリケーションでは、すべてのコードを小さな個別のファイル (Java に似た名前空間/ディレクトリ構造を使用して、「クラス」または機能グループごとに 1 つのファイル) に記述します。すると、次のようになります。

すべてのコードを取得し、(JSMin のバリアントを使用して) 圧縮してダウンロードサイズを削減するコンパイル時のステップ
常に、またはほぼ常に必要となるクラスを取得し、それらを大きなバンドルに連結してサーバーへの往復を削減するコンパイル時のステップ。
実行時にオンデマンドで残りのクラスをロードする「クラスローダー」。

サーバーの効率を高めるために、すべての JavaScript を 1 つの縮小ファイルに結合することが最善です。

コードが必要な順序を決定し、縮小されたコードを必要な順序で 1 つのファイルに配置します。

重要なのは、ページのロードに必要なリクエストの数を減らすことです。そのため、本番環境ではすべての JavaScript を単一のファイルに含める必要があります。

開発用にファイルを分割したままにし、すべてを結合/コンパイルするビルドスクリプトを作成することをお勧めします。

また、経験則として、ページの終わりの方に JavaScript を含めるようにしてください。JavaScript がヘッダー (またはページの最初のどこか) に含まれている場合、パイプラインがオンになっている場合でも、JavaScript が読み込まれるまで他のすべてのリクエストは行われなくなります。ページの最後にある場合は、この問題は発生しません。

他の (優れた) JavaScript アプリのコードを読んで、それらがどのように処理するかを確認してください。ただし、最初はクラスごとに 1 つのファイルから始めます。ただし、本番環境の準備ができたら、ファイルを 1 つの大きなファイルに結合して縮小します。

ファイルを結合しない唯一の理由は、すべてのページのすべてのファイルが必要ない場合です。

私の戦略は 2 つの主要なテクニックで構成されます。AMD モジュール (数十のスクリプトタグを避けるため) とモジュールパターン (アプリケーションの各部分の密結合を避けるため)

AMD モジュール:非常に簡単です。ここを参照してください。 http://requirejs.org/docs/api.html また、アプリのすべての部分を 1 つの縮小された JS ファイルにパッケージ化することもできます。 http://requirejs.org/docs/optimization.html

モジュールパターン:私はこのライブラリを使用しました: https://github.com/flosse/scaleApp 今、これは何ですかと尋ねていますか？詳細はこちら: http://www.youtube.com/watch?v=7BGvy-S-Iag

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

大規模な JavaScript アプリを管理および展開するためのベスト プラクティス

大規模な JavaScript アプリを管理および展開するためのベストプラクティス