2

ご存知のように、CSS と JavaScript を縮小すると、ページの読み込みが速くなります。

開発段階で、「フォーマット済み」バージョンが必要な場合は、Eclipse IDE でCTRL+ Shift+を使用しますF)。次のような出力が生成されます。

*.cssClass {
    background-color: #FFFFFF;
    color: #C4C0B9;
    border-width: 1px;
    border-style: solid;
    border-radius: 0px;
    padding: 1px;
}

デプロイ フェーズでは、yuicompressor などの外部ツールによって、次のような縮小版が生成されます。

*.cssClass{background-color:#FFFFFF;color:#C4C0B9;border-width:1px;border-style:solid;border-radius:0px;padding:1px;}

問題は、開発サイクルが次のように実行されることです。

  • 開発（初期コード）
  • フォーマットする
  • テスト
  • 縮小する
  • 再テスト
  • 展開

更新が必要な場合:

  • 発達
  • 最後に縮小されたコードをフォーマットする
  • テスト
  • 縮小する
  • 再テスト

フォーマットされた/縮小されたコード間を自動的に往復するトリックはありますか?

  • 開発中: フォーマットされたコードを表示する
  • デプロイ時: 縮小されたコードを保存する
4

2 に答える 2

2

さまざまなサーバーが、要求に応じて縮小コードを処理できます。結果をキャッシュして、最初のコードとほぼ同じパフォーマンスを維持します (最初のリクエストには数秒かかる場合があります)。例えば

  • node-minifyを使用した nodejs の接続モジュール(内部で YUI を使用し、簡単にキャッシュできます)
  • 圧縮されたスタイルシートをエコーする PHP スクリプト (サーバー キャッシュを使用)

受信時にコードが縮小されるステージング環境を用意することをお勧めします。たとえば、 gitで post-receive フックを使用したり、サーバーでコードを更新するシェル スクリプトを使用したりします。そこでテストした後、プライマリ サーバーはシェル スクリプト内の単純な scp (安全なコピー) として運用ファイルを受け取ることができます。

単純な空白の削除 (たとえば、#fffff圧縮する必要がある#fff) でない限り、縮小は問題を引き起こす可能性があるため、展開する前に常にテストすることをお勧めします。これは、ワークステーションでそれについて心配する必要があるという意味ではありません。

于 2013-08-21T13:18:04.923 に答える
2

開発中に縮小するべきではありません。縮小は、開発ではなく展開の一部であるべきです。

したがって、開発とライブ展開の間に一歩を踏み出すことをお勧めします。「統合」テスト フェーズでは、コードが縮小され、ライブ用に処理され、実際にライブ サーバーにデプロイされる前に、コードが引き続き機能することを確認するためにそこでテストされます。

開発中にコードを編集するたびに、縮小版の CSS と JavaScript をテストすることはお勧めしません。縮小は比較的信頼できるプロセスであり、有効な CSS/JS を取り、その動作を変更することなく小さくすることができます。

ミニファイヤがそのサービスを提供していない場合は、別のミニファイヤに切り替えるか、使用しているミニファイヤの改善に取り組む必要があります (それを壊すテスト ケースを作成し、場合によっては修正に役立てることもできます)。

また、コメントで述べたように、理想的には、ある種のビルド スクリプトが統合およびライブ環境にデプロイされるため、手動で縮小する必要はありません。

より高度なミニファイア

非常に優れた圧縮を提供するミニファーがあるが、特定のコード構成を窒息させるという犠牲を払っている場合は、ミニファーが許可しないコード構成を文書化し、チームにそれらを避けるようにしつこく要求します。

しかし、minifier のコードを実際に書くべきではありません - それはあなたを助けるツールであることを意図しています。より寛容なミニファイヤ (gzip 圧縮後)と比較して、バイトの節約を確認し、増加した精神的オーバーヘッドに見合うだけの価値があるかどうかを判断してください。

プロジェクトに関連する測定値は、回線上のバイト数が少ないことだけではありません。

于 2013-08-21T13:10:38.227 に答える