9

私のページ構造が次のようになっているとしましょう：

1. one.html :
   includes ->   a.js , b.js , c.js ,d.js

2. two.html :
   includes ->   a.js , b.js,  x.js, y.js, z.js

3. three.html :
   includes ->   a.js , b.js, s.js,  x.js, y.js

等々。一部のページは他のページよりも訪問数が多く、3ページがWebサイトの全ページビューの99％を占めていると言います。

私は次の解決策を探しています：

i）ページに含めることができるグループ内のファイルを結合して最小化します。

ii）グループのファイル名を最終的に結合されたファイル名にマップするロジックがあります。

iii）GoogleClosureコンパイラ/YUIコンプレッサのようなミニファイアが含まれています。

私が見た解決策の1つは、 PHPの縮小です。

それのほとんどを行います。ただし、次のような欠点があります。

i）静的に結合されたファイルをPHP minifyをホストしている同じWebサーバーではなく、CDNサーバーでホストしているため、グループ名によるサーバーファイルへのPHPminifyのロジックは機能しません。

ii）PHPMinifyはPHPCGIを使用してスクリプトを処理および提供しますが、縮小したコンテンツをCDNサーバーから直接提供したいと思います。

PHP Minifyには、グループ名を結合ファイル名にマップするいくつかの関数がありますか。これをWebページで使用して、結合JSファイルのCDNパスを直接設定できます。例えば

<?php
  $groupName = array("onePage" => array('a.js','b.js','c.js','d.js');
?>

<script type="text/javascript" src="http://www.MYSTATICSERVER.com/js/<?php getMergedFileName($groupName)"></script>

PHP MinifyのPHPスクリプトを呼び出してグループのファイルを取得するのではなく、これは実際にはPHPページ呼び出しであり、以前に生成されたファイルからjavascriptコンテンツを提供します。

<script type="text/javascript" src="http://www.MYWEBSERVER.com/min/?g=onePage" ></script>

（これのほとんどは、さまざまなソリューションをカスタム展開スクリプトおよびミニファイツール（ANT、FABRIC + YUICompressor / ClosureCompilerなど）と組み合わせることで実行できることに同意しますが、見逃した可能性のある十分に開発された構成可能なソリューションを探しています）

4

4 に答える 4

3

minifyの例を示すように更新されました

minifyを使用して実行可能に見えます。あなたがこれを試したかどうかはわかりませんが、それを必要とするかもしれない他の人のためにそれをそこに置いてください

1）Minifyは、スクリプトの結合されたgzip圧縮されたコピーを生成し、それをキャッシュとして使用できるため、要求のためにすべてのファイルを処理する必要はありません。これを有効にするには、tempディレクトリの場所でconfig.phpファイルを編集するだけです。

$min_cachePath = 'c:\\xampp\\htdocs\\min\\cache';

2）groupsConfig.phpにすべてのグループを追加したら、各グループにリクエストを送信して、minifyがキャッシュフォルダーに出力ファイルを生成するようにします。

3）グループごとに、次の名前のtempフォルダーに2つのファイルがあります。

minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz

4）必要に応じて、ファイルの名前を変更し、CDNに直接デプロイできます

5）CDNでURLの書き換えが許可されている場合は、提供するページ内の場所を変更することなく、スクリプトのURLを書き換えてJSを提供できます。

多数の異なる構成がない限り、YUICompressorを使用して構成し、CDNネットワークにデプロイすることをお勧めします。単純なシェルスクリプトを使用してそのようなものを自動化することは、実際には非常に簡単です。ただし、セットアップが非常に複雑な場合は、node.js上で実行されるgruntなどのビルドツールの使用を検討できます。私はGruntを使用して、同じコードベースを使用してさまざまなプロジェクトのJSファイルをビルドしてきましたが、非常にうまく機能します。さらに、lintとcompressionはOOTBでサポートされています。

于 2012-04-30T06:22:23.633 に答える
1

私自身のプロジェクトはあなたのプロジェクトとよく似ています。外部およびインターンの両方のJavaScript、CSS、および画像を含むHTML。私も既成の解決策を探し回って見つけられなかったので、自分で開発しました。これが私が作成したシステムの概要です。あなたがそのルートに行くのなら、私はこれがあなたに何を探すべきかについての考えを与えることを願っています。

システムは、展開するプロジェクトの特定のリビジョンをチェックアウトすることから始まります。ローカルファイルシステム上のパスとそれぞれのリモートパス（CDNやWebサーバーなど）の間の変換を確立する必要があります。私の場合、すべてのアセットはプロジェクト内の固定ディレクトリからロードされます。

まず、すべてのHTMLテンプレートを解析します（HTMLをPHPコードから分離するためのMVCがあります）。これにより、すべてのJavaScript、CSS、および画像参照が収集されます。

  • HTML、JavaScript、またはCSS内の画像参照は、CDN上のそれらの場所に置き換えられます。
  • インターンされたJavaScriptとCSSは、それぞれClosureCompilerとYUIを使用してオンザフライで圧縮されます。
  • 連続する外部JavaScriptおよびCSSブロックは、圧縮されたコード/スタイルの単一のバンドルに置き換えられます。バンドル名は、ファイル名とそれぞれのバージョンのハッシュです（CDNは最大有効期限のあるファイルを提供するため、変更を加えると一意のファイル名が必要になります）。

次に、すべてのバンドルが圧縮、圧縮、保存され、展開の準備としてイメージとともにCDNにアップロードされます。PNGファイルも、サイズを小さくするために「クラッシュ」されます。

最後に、プロジェクト全体がアップロードおよびデプロイされます（複数のサーバーの場合）。

結論それは多くの作業ですが、実行すると、それが機能するのを見るのは素晴らしいことです:)

于 2012-05-04T17:03:43.627 に答える
0

グループ化構成ファイル（xml / php）を作成します。このファイルには、使用している静的htmlで使用するためのグループ化ルールが含まれています。

<groupings>
    <group path='grouped_minified_js.js'><!-- multiple groups can be used for grouping js/css files. reuse this group by including the id in multiple views -->
            <resource>PATCH_OF_FILE_TO_BE_GROUPED</resource><!-- multiple file to be grouped -->
            .
            .
            .
        </group> 
        <group path='xyz.css' /> ...<!-- additional grouping rule -->
</groupings>

この構成を読み取り、PHP minifyを使用して、グループ定義で指定されたパスにグループ化されたミニファイされたjs/cssファイルを作成するphpスクリプトを作成します。

これらのパスを使用して、グループ化されたファイルを静的htmlファイルに含めます。スクリプトを実行してページをテストし、グループ化されたファイルをCDNにデプロイします。

于 2012-05-03T15:45:35.433 に答える
0

うなり声は素晴らしいです。それでも問題が解決しない場合は、カセットを試してください：http: //getcassette.com/

于 2012-05-03T20:54:19.967 に答える