4

複数のスクリプト タグ (20 近く) を含む html ファイルがあります。すべての JS ファイルを 1 つに連結してから、連結されたファイルを縮小することにしました。私はantタスクを使用して連結していますが、縮小のためにもそうします。デバッグの目的で、連結されていない/縮小されていないバージョンのオプションを提供する必要があることを認識しています(開発環境で別名)。

これを達成する方法を考えていました。例: ファイル main.html には 20 個のスクリプト タグがあります。私が考えた 1 つの方法は、HTML プリプロセッサを使用し、条件付きでスクリプト タグを含めることでした。

#ifdef perf
    <script src="main.min.js"></script> 
#else 
    <script src="ctrl.js"></script>
    <script src="services.js"></script>
    <script src="directives.js"></script>
    <script src="model.js"></script>
    .
    .
    .P.S
    <script src="file_no_20.js"></script>
#endif

main.min.js は、ant を使用したビルド プロセス中に連結および縮小されたファイルです。

これを行うより良い方法はありますか？このアプローチの欠点は何ですか?

ありがとう、クリス。PS: HTML の前処理にhttp://fmpp.sourceforge.net/を使用することを考えている場合は、他の提案を歓迎します。

4

2 に答える 2

1

Chrome は、これに最適な「ソース マッピング」と呼ばれる優れた機能をサポートしています。詳細については、こちらのガイドをお読みになることをお勧めします。

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

ミニフィケーションに関して AngularJS を使用している場合は、いくつかの注意事項があります。ドキュメントから：

angular は引数の名前からコントローラーのコンストラクター関数へのコントローラーの依存関係を推測するため、PhoneListCtrl コントローラーの JavaScript コードを縮小すると、そのすべての関数引数も同様に縮小され、依存関係インジェクターは識別できなくなります。正しくサービスします。

縮小によって引き起こされる問題を克服するには、スニペットの最後の行 (コメントアウト) が示唆するように、サービス識別子文字列を含む配列をコントローラー関数の $inject プロパティに割り当てるだけです。

PhoneListCtrl.$inject = ['$scope', '$http'];

この依存関係リストを指定し、縮小化の問題を回避するもう 1 つの方法もあります。挿入する関数を文字列の配列 (依存関係名を表す) にラップするブラケット表記を使用し、その後に挿入する関数を続けます。

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

これらの方法は両方とも、Angular によって注入できる任意の関数で機能するため、どちらを使用するかはプロジェクトのスタイル ガイドに依存します。

http://docs.angularjs.org/tutorial/step_05

于 2012-06-03T18:55:06.173 に答える
1

これを実現するには、 http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags4.html#67771のようなタグ ライブラリを使用することをお勧めします。スクリプトのようなものを含めます:

<script:include src="myscript1.js" />
<script:include src="myscript2.js" />
<script:include src="myscript3.js" />
..

また、システムのページ パラメータを使用して、スクリプトを連結して縮小する必要があるかどうかを判断します。以下のようなもの：

www.yourapp.com/app?debugMode=true

デフォルトでは、スクリプトは連結されて縮小されます。あなたがプロジェクトに取り組んでいる開発者であれば、debugMode=true のようなページ パラメータを追加するだけです。debugMode が true の場合、スクリプトをそのままレンダリングします。

市場にはhttp://developer.yahoo.com/yui/compressor/のような多くのサービスがあり、プロジェクトに統合してこの仕事を行うことができます。

ページをロードするたびにスクリプトを圧縮しないでください。毎回実行する必要がないように、最初に実行してキャッシュします。いつでも最新のスクリプト ファイルを再構築するには、?rebuild=true などの別のパラメーターを追加するだけで、すべての最新のファイルが最小化およびキャッシュされます。CSSでも同じことができます。

于 2012-08-23T10:21:14.213 に答える