Clever Geek Handbook

RequireJSによるコードの最適化：実行方法と必要な理由

以前の投稿で、RequireJSをプロジェクトに接続する方法について説明しました。 さらに、彼は最適化について話すことを約束しました。 RequireJS上に構築されたプロジェクトの最適化は非常に迅速かつ簡単です。 さらに、コード自体（スクリプト、ライブラリ、プラグイン）とスタイルファイルの両方が最適化の対象となります。



RequireJSのコード最適化機能を実証するために、単純な1ページのプロジェクトを作成しました。 ホームページにユーザーのリストが表示されます。 ユーザーをクリックすると、そのユーザーに関する情報のページが表示されます。 ユーザーは2つのタイプ-通常のユーザーと管理者に分けられ、ページはコンテンツとデザインの両方で異なります。



このタスクを実装するために、私はいつものように、BackboneライブラリともちろんRequireJSを使用しました。 私がここで終わったものを見ることができます。



どうやって



RequireJSの接続に問題はないはずです。 主なものは、構成を正しく記述することです（ファイルapplication.js）： 



requirejs.config({ baseUrl: "js/library", paths: { jquery: 'jquery.min', backbone: 'backbone.min', underscore: 'underscore.min', domready: 'domReady', appControllers: '../Controllers', appModels: '../Models', appViews: '../Views' }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } });


すぐに質問に答えたいと思います。なぜシムブロックでバックボーンを接続するのですか？ 答えはとても簡単です。 私が使用しているバックボーンおよびアンダースコアライブラリのバージョンは、 AMDをサポートしていません。 したがって、それらをshimブロックに追加する必要があります。 ただし、AMDがサポートされているバージョンをダウンロードして、RequireJS設定を追加しなくてもBackboneを安全に使用できます。



プロジェクトの準備が整い、最適化を開始できます。 これを行うには、いくつかの手順を実行する必要があります。



  1. 公式Webサイトで、 Nodeをダウンロードしてインストールします。 最適化スクリプトを実行する必要があります。
  2. r.js最適化スクリプトをダウンロードします 。 プロジェクトのルートに別の最適化フォルダーを作成し、このスクリプトをそこに配置しましょう。
  3. 最適化フォルダーで、スクリプト（ファイルbuild_scripts.js）およびスタイル（build_css.js）の最適化設定を使用してファイルを作成します。 多くの設定があります。 それらの完全なリストはこちらです。 これらの設定は、最適化スクリプトの実行時にコマンドラインパラメーターとして直接設定することもできます。 しかし、私はそれらをファイルに保存することにしました。 まず、編集するときに便利です。 第二に、コマンドラインオプションには構文上の制限があります。 つまり、ポイントはオブジェクトのプロパティの区切りとして解釈されます。 したがって、フォームの記録 



     paths.core/jquery.tabs=empty:


    構成と一致します 



     paths: { 'core/jquery': { tabs: 'empty:' } }


    じゃない 



     paths: { 'core/jquery.tabs': 'empty:' } }




すべて準備完了です。 次に、最適化スクリプトを実行します。 コンソールに移動して、コマンドを実行します。 



 node r.js -o build_scripts.js


最適化されたapplication-build.jsスクリプトファイルを取得しました 。



それでは、スタイルファイルを最適化しましょう。 スクリプトほど簡単ではありません。 プロジェクトは4つのスタイルファイルを使用します。





それらを1つに結合するには、次のようにします。他の3つのファイルをapplication.cssファイルにインポートします。 



 @import url("bootstrap.min.css"); @import url("userpage.css"); @import url("adminpage.css");


最適化を実行します。 



 node r.js -o build_css.js


ファイルapplication-built.cssを取得しました 。 次に、最適化されたファイルをプロジェクトに接続して結果を確認します。 



 <link href="css/application-built.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="application-built.js"></script>


ご覧のとおり、すべてが機能します。 ちなみに、設定ファイルには次のような行があります 



 include: ["requireLib"],


RequireJSを使用せずに、最適化されたスクリプトファイルを個別に使用できます。 それ以外の場合、最適化されたスクリプトは次のように接続します。 



 <script data-main="js/application-built" src="js/library/require.js"></script>


それは何のためですか？



最適化は、スクリプトの読み込みを高速化するのに役立ちます。これにより、サイト全体の速度が向上します。 しかし、プロジェクトに本当に最適化が必要かどうかをどのようにして知るのでしょうか？ おそらくすべてがすでに非常に高速に動作しており、改善できるものはありませんか？ この質問への答えはあなたにYSlowを与えます。



YSlowは、Yahooが開発したMozilla Firefoxブラウザー拡張機能です。 ページの読み込み速度を測定でき、個々のコンポーネントのかなり詳細な分析も行います。 分析のポイントの1つは、正確にコードを最適化する必要性です。 YSlowは単独では機能しませんが、Firebug拡張機能の一部として機能します。


More articles:


All Articles