8

私は最近、Web アプリケーション全体で共有された JavaScript および CSS ファイルを処理する方法についていくつか考えました。

私が取り組んでいる現在のWebアプリケーションでは、サーバー上のフォルダーに配置された非常に多数の異なるjavascriptとcssファイルを取得しました。一部のファイルは再利用されますが、他のファイルは再利用されません。

実稼働サイトでは、多数の HTTP リクエストがあり、何キロバイトもの不要な JavaScript や冗長な CSS が読み込まれているのは非常にばかげています。もちろん、これに対する解決策は、必要な情報のみを含む大きなバンドル ファイルをページごとに 1 つ作成し、それを最小化して圧縮 (GZIP) してクライアントに送信することです。

JavaScriptファイルのバンドルを作成し、それらを手動で最小化することを一度行う場合は心配ありませんが、アプリは継続的に維持され、物事は変化し、発展するため、これをプッシュしながら手動で行うことはすぐに頭痛の種になります. javascript および/または css ファイルを本番環境に変更する新しい更新。

これを処理するための良いアプローチは何ですか? アプリケーションでこれをどのように処理しますか?

4

5 に答える 5

4

私はCombresというライブラリを作成しました。これは、縮小、結合などを行います。また、ローカルとリモートの両方の JS/CSS ファイルの変更を自動的に検出し、最新のものをブラウザにプッシュします。無料でオープンソースです。Combresの紹介については、 この記事をご覧ください。

于 2010-06-11T06:18:27.830 に答える
2

立ち上げているサイトでまったく同じ問題に取り組んでいます。

最近、SquishItという名前のプロジェクトがあることを知りました( GitHubを参照)。Asp.net フレームワーク用に構築されています。asp.net を使用していない場合でも、彼がここで行っていることの背後にある原則について学ぶことができます。

SquishIt を使用すると、ファイルの名前付き「バンドル」を作成し、サイト全体でこれらの結合および縮小されたファイル バンドルをレンダリングできます。

于 2010-06-09T20:36:36.243 に答える
1

生の CSS と Javascript のソース コード ファイルをオンデマンドで結合、圧縮/縮小、gzip、およびキャッシュする ASP.NET ハンドラーを以前に作成しました。たとえば、3 つの CSS ファイルを取り込むには、マークアップでは次のようになります...

<link rel="stylesheet" type="text/css"
      href="/getcss.axd?files=main;theme2;contact" />

getcss.axd ハンドラーは、クエリ文字列を読み取り、読み取って縮小する必要があるファイルを決定します (この場合、main.css、theme2.css、および contact.css という名前のファイルを探します)。ファイルの読み取りと圧縮が完了すると、圧縮された大きな文字列がサーバー側のキャッシュ (RAM) に数時間保存されます。後続のリクエストで再圧縮する必要がないように、常に最初にキャッシュを検索します。

私はこのソリューションが大好きです...

  • リクエストの数を可能な限り減らします
  • 展開に追加の手順は必要ありません
  • メンテナンスがとても簡単です

唯一の欠点は、すべてのスタイル/スクリプト コードが最終的にサーバー メモリ内に格納されることです。しかし、最近の RAM は非常に安価であるため、以前ほど大したことではありません。

また、言及する価値のあることの 1 つは、クエリ文字列が有害なパス操作を受けないようにすることです (AZ と 0-9 のみを許可します)。

于 2010-06-09T21:33:42.280 に答える
1

CSS ファイルを分類し、論理的な部分 (共通、印刷、対など) に分割してから、CSS のインポート機能を使用して CSS ファイルを正常にロードできます。これらの小さなファイルを再利用すると、クライアント側のキャッシュも使用できるようになります。Javascriptに関しては、サーバー側でこの問題を解決できると思います。複数のスクリプトファイルをページに追加し、サーバー側でスクリプトファイルを動的に生成することもできますが、クライアント側のキャッシュを機能させるには、これらの部分が異なる静的である必要がありますアドレス。

于 2010-06-09T20:35:48.327 に答える
-1

あなたが話していることはミニフィケーションと呼ばれます。

これを支援するために、さまざまなプラットフォームと言語用の多くのライブラリとヘルパーがあります。あなたが使用しているものを投稿していないので、あなた自身にもっと関連するものを実際に指摘することはできません.

これは、Google コードの 1 つのプロジェクトです - minify。

これをすべてオンザフライで実行する .NET Http ハンドラの例を次に示します。

于 2010-06-09T20:29:33.043 に答える