javascript - JavascriptとCSSファイルのサイズを減らすための最良の方法は何ですか？

Question

大きなまたは多くのJavascriptおよびCSSファイルを操作する場合、ファイルサイズを小さくするための最良の方法は何ですか？

score 20 · Accepted Answer

サーバー側の圧縮を使用することに加えて、インテリジェントコーディングを使用することは、帯域幅のコストを低く抑えるための最良の方法です。DeanEdwardのJavascriptPackerのようなツールはいつでも使用できますが、CSSの場合は、時間をかけてCSSShorthandを学習してください。例：使用：

background: #fff url(image.gif) no-repeat top left;

...それ以外の：

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

また、CSSのカスケードの性質を使用します。たとえば、サイトで1つのフォントファミリを使用することがわかっている場合は、bodyタグに含まれるすべての要素に対して次のように定義します。

body{font-family:arial;}

役立つもう1つのことは、CSSとJavaScriptをインラインではなく、各ページの先頭にファイルとして含めることです。そうすれば、ブラウザがキャッシュから移動した後、サーバーはブラウザに1回だけそれらを提供する必要があります。

Javascriptを含む

<script type="text/javascript" src="/scripts/loginChecker.js"></script>

CSSを含む

<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" />

score 7 · Accepted Answer

ミニファイは、Javascriptを縮小する最も簡単な方法の1つと思われます。

Webサーバーレベルでzipをオンにすることも役立ちます。

score 6 · Accepted Answer

ファイルを直接微調整するのではなく、圧縮することをお勧めします。ほとんどのクライアントはそれをサポートしています。

これは簡単で効果的であることがわかると思います。

それを使ったジェフの冒険からの詳細。

score 3 · Accepted Answer

コードを gzip 圧縮することを誰も提案しなかったことに驚いています。そこにストレート〜50％の節約！

score 3 · Accepted Answer

圧縮と縮小化 (空白の削除) が始まりです。

さらに：

JavaScript と CSS のすべてのインクルードを 1 つのファイルに結合します。そうすれば、ブラウザはサーバーへの単一のリクエストでソースをダウンロードできます。ビルドプロセスのこの部分を作成します。
cache-control http ヘッダーを使用して、Web サーバーレベルでキャッシュをオンにします。ブラウザがソースを 1 回だけダウンロードするように、有効期限を大きな値 (1 年など) に設定します。後で編集できるようにするには、次のようにクエリ文字列にバージョン番号を含めます。

<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />

score 2 · Accepted Answer

質問を参照してください:最高の JavaScript コンプレッサー

JavaScript ファイルを gzip するかどうかによって、コンプレッサーの選択が変わる場合があります。(現在、gzip も使用する場合、Packer は最良の選択ではありませんが、現在の最良の回答については上記の質問を参照してください)

score 1 · Accepted Answer

Google は、独自のサイトに含めることができる圧縮済みの JavaScript ライブラリファイルをいくつかホストしています。Google はこのための帯域幅を提供するだけでなく、ほとんどのブラウザのファイルキャッシュアルゴリズムに基づいて、ユーザーが別のサイトで Google からファイルを既にダウンロードしている場合、あなたのサイトで再度ダウンロードする必要はありません。そこにある90k以上のJSライブラリのいくつかにとっては、ちょっとしたボーナスです。

score 1 · Accepted Answer

Shrinksafe が役に立つかもしれません : http://shrinksafe.dojotoolkit.org/ Web アプリをパッケージ化するときに、ant ビルドから実行します。

score 1 · Accepted Answer

Dojo Shrinksafeは、実際の JS インタープリターを使用する Javascript コンプレッサーであるため、コードが壊れることはありません。他のものも問題なく動作しますが、圧縮されたスクリプトを再テストする必要がないため、Shrinksafe はビルドスクリプトで使用するのに適しています。

score 1 · Accepted Answer

YUI Compressor を支援すると、スクリプトを微調整してさらに節約する方法について、良いアドバイスが得られます。

score 0 · Accepted Answer

CssTidyは、私が知っている中で最高のCSSオプティマイザーです。（構成可能に）コメントを削除し、空白を削除し、 nickfが言及した多くの省略規則を使用するように書き直します。他の人が言及したように、結果を圧縮することも役立ちます。

圧縮率はかなり劇的なものになる可能性があり、ファイルサイズを気にすることなくCSSに広範囲にコメントすることができます。

残念ながら、このレベルの前処理は、一般的な「cssハック」のいくつかと予測できない（または予測できるが望ましくない）方法で相互作用します。動作するものと動作しないものがあり、他のもの（特にコメント）の圧縮レベルを下げる構成設定が必要なものもあります。

score 0 · Accepted Answer

javascriptには、DeanEdwardsのJavascriptPackerを使用します。.NET、perl、php4、php5、WSHに移植されており、aptanaプラグインもあります。

Javascriptパッキングにはいくつかの種類があります。コメントと空白を削除するものもあれば、変数名を簡潔に変更するものもあります。また、それらが何をするのかさえわかりませんが、出力は確かに小さいです。ハイエンドの圧縮はeval（）関数を使用して機能しますが、これはクライアントに余分な負担をかけるため、スクリプトが特に複雑な場合、または低速のハードウェア用に設計している場合は、この点に注意してください。Javascriptパッカーは、使用する圧縮レベルのオプションを提供します。

CSSの場合、できる最善のことは空白とコメントを取り除くことです。ありがたいことに、これは1行の関数でそれを実現できることを意味します。

function compressCSS($css) {
    return
        preg_replace(
            array('@\s\s+@','@(\w+:)\s*([\w\s,#]+;?)@'),
            array(' ','$1$2'),
            str_replace(
                array("\r","\n","\t",' {','} ',';}'),
                array('','','','{','}','}'),
                preg_replace('@/\*[^*]*\*+([^/][^*]*\*+)*/@', '', $css)
            )
        )
    ;
}

この関数とJavascriptパッカーは個々のファイルのファイルサイズを縮小しますが、サイトから最高のパフォーマンスを得るには、HTTPリクエストの数も減らす必要があります。各JavascriptファイルとCSSファイルは個別のリクエストであるため、それぞれを1つのファイルに結合すると最適な結果が得られます。単一の巨大なJSファイルを維持しようとする代わりに、 http：//spadgos.com/？p = 32のブログ（恥知らずなセルフプラグ）に書いたプログラム/テクニックを使用できます。

プログラムは基本的に「ビルドスクリプト」タイプのファイルを読み取ります。このファイルは、複数のJavascriptファイルとCSSファイルを同時に1つ（必要に応じて複数）に結合して圧縮します。すべてのファイルの出力と表示にはいくつかのオプションがあります。そこにはもっと大きな記事があり、ソースは無料で入手できます。

score 0 · Accepted Answer

0

YUI Compressor は、Javascript と CSS の両方を圧縮するのに非常に優れています。

于 2008-09-16T06:15:17.780 に答える

score 0 · Accepted Answer

YUI Compressor には私の意見があります。単純な理由は、コードに対して正規表現変換を実行するだけでなく、Javascript インタープリターと同様にコードの解析ツリーを実際に構築し、その方法で圧縮するからです。通常、識別子の圧縮をどのように処理するかについては、非常に注意が必要です。

さらに、CSS 圧縮モードがありますが、あまり試したことはありません。

score 0 · Accepted Answer

JSCompressは、JavaScript を縮小するだけでなく、複数のスクリプトを結合するための優れた方法であることがわかりました。さまざまなスクリプトを 1 回しか使用しない場合に便利です。圧縮前に 70% 節約されました (圧縮後も同様の結果が得られました)。

後で著作権表示を追加することを忘れないでください。

score -1 · Accepted Answer

BoryiのWebコンプレッサーツールを試して、標準のHTMLファイル（Javascriptコードとcssコードは埋め込まれていませんが、リンクまたはインポートできます）、Javascriptコード（適切に;で終わる）、およびcssコードを圧縮します。

score -1 · Accepted Answer

http://www.codeplex.com/NCOptimizerで公開されている ASP.Net の新しいランタイムオプティマイザーを試してみます。

javascript - JavascriptとCSSファイルのサイズを減らすための最良の方法は何ですか？

18 に答える 18

Javascriptを含む

CSSを含む

Related

Reference