web-dev-qa-db-ja.com

JSまたはCSSをその場で縮小する方法

JSとCSSをオンザフライ/ランタイムで縮小する方法。ランタイム/オンザフライで縮小された場合、元のコード構造をサーバーに保持できます。

phpjavascriptcssoptimizationminify
42
gourav

多くの検索とサイトの最適化の後、CSSファイルにこのスクリプトを使用することを本当にお勧めします。

<style>
<?php
     $cssFiles = array(
      "style.css",
      "style2.css"
    );

    $buffer = "";
    foreach ($cssFiles as $cssFile) {
      $buffer .= file_get_contents($cssFile);
    }
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(': ', ':', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    echo($buffer);
?>
</style>

すべてのcssファイルを1つに圧縮し、それをhtmlに圧縮して、追加リクエストの数をゼロに減らします。また、スタイルをhtmlに貼り付けるよりも、独自のcompress.cssファイルを作成することもできます。

19
Krzysiu Jarzyna

あなたの質問は実際にあるべきだと思います：ライブサーバーを確実に繰り返し更新する方法は？必要なのは自動展開スクリプトです。 個人的に 私は ファブリック を好むが、他のツールが利用可能である。

自動展開スクリプトを使用すると、ライブサーバーに移動してソースコードを更新し、展開手順（javascriptの縮小など）を実行し、Webサーバーを再起動する単一のコマンドを実行できます。

Javascriptまたはcssファイルをその場で縮小するのは本当に望ましくありません。展開時に一度行ってから、これがライブ展開かどうかを指定する変数をコードに持つ必要があります。変数がtrueの場合、ファイルへのリンクは最小化されたバージョンへのリンクである必要があり、falseの場合は通常のバージョンへのリンクである必要があります。

最小化を実行するプログラムがいくつかありますが、まだ言及されていないプログラムは JSMin です。

9
Andrew Wilkinson

JavaScriptの可読性をわずかに低くし、実行時にこれを行うことが目標であれば、非常に簡単に保つことができます。わずか3行のコードで、数ミリ秒以内に完全な縮小化を実現できます。

// make it into one long line
$code = str_replace(array("\n","\r"),'',$code);
// replace all multiple spaces by one space
$code = preg_replace('!\s+!',' ',$code);
// replace some unneeded spaces, modify as needed
$code = str_replace(array(' {',' }','{ ','; '),array('{','}','{',';'),$code);

これは、構文チェックを一切行いません。これを使用すると、コードが無効になる可能性があります。 JSの行の終わりを確認してください。「;」です。どこかに行方不明？

5
KIKO Software

自由に話せたら

JS/CSSファイルを最小化することは、より迅速に解析すること（および使用するディスク容量を少なくすること）を目標とします。実行時に縮小すると、その利点は完全に失われます。

おそらくあなたの最終目標を間違えているかもしれませんが、最初はこれが私の頭に浮かぶものです。

編集：@Antによる投稿は、それを明確にしてくれました。

4
Steven Ryssaert

HTML5 Boilerplate には、JS、CSS、画像などを圧縮する便利なビルドスクリプトが付属しています。見てみな！

他の回答で説明したように、「実際の」オンザフライの縮小（要求されるたびにファイルを動的に圧縮する）はあまり良い考えではありません。

4
Mathias Bynens

Apache/Ngnixの設定を完全に制御できる場合、（一般的に）素晴らしいオプションは PageSpeed モジュールを有効にすることです。

2
stefano di luca

Assetic は、CSSやJavascriptなどのリソースの整理を含む整理に役立つ素晴らしいプロジェクトです。はじめに here を参照してください。

一般に、ランタイムミニフィケーションは、常にサーバー側でのソリッドキャッシングと、ブラウザーへの道に沿ったクライアントキャッシュとプロキシキャッシュの使用と組み合わせる必要があります。

2
Stefan Gehrig

system(); thisが必要です

$ Java -jar yuicompressor-x.y.z.jar

http://developer.yahoo.com/yui/compressor/

1
dynamic

それはまさにWebUtilities（J2EEの場合）が行うことです。こちらがリンクです。

http://code.google.com/p/webutilities/

その場で縮小とマージを行います。また、リソースが変更されていない場合、リソースの縮小または再処理の再実行を回避するキャッシングがあります。また、次の最適化にも役立ちます。

  • 1つのリクエストで複数のJSまたはCSSファイルを提供する
  • ブラウザによってキャッシュされるJS、CSS、および画像ファイルのExpiresヘッダーを追加します
  • JS、CSSファイルをその場で縮小
  • インラインCSSおよびJSコードブロックの縮小
  • 応答に文字エンコードを追加します
  • サーバー圧縮コンテンツ（gzip/compress/deflate）
  • 再処理を回避することにより、読み込みを高速化するためのキャッシュ応答

あなたがそれを面白いと思う場合に見てください。

0
Rajendra