css - CSS を含む GWT Html ファイル

Question

GWT プラグインを使用して新しいプロジェクトを作成すると、スケルトンプロジェクトが作成されます。HTML ファイルには、「要求されたファイルの数を減らすために CSS をインライン化することを検討してください」というコメントがあります。インラインではなく別のファイルに css を入れると、ファイルのサイズが小さくなりますか? 本当じゃない？

score 19 · Accepted Answer

その答えは、GWT の動作方法にあります。GWT はモジュールロードごとに 1 つのページロードしか持たないため、インラインキャッシングは実際には機能しません。

答えだけを知りたい場合:インライン CSS は、プロジェクトを構成するすべてのファイルをロードするために必要な TCP/IP 接続の数を減らします。 これは、CSS ファイルが複数ある場合や、待ち時間が長い場合、およびその他のネットワーク条件が存在する場合に、重要な問題になる可能性があります。私の仕事（州政府）では、常に「太いパイプ」が保証されているわけではありません。

GWT (または少なくとも gwt-incubator) には、インライン CSS の最適化と情報とレイアウトの分離を組み合わせるメカニズムがあります。

ImmutableResources と StyleInjector を入力します。これら 2 つのことを (組み合わせると)、不変 (コンパイル時間後) のリソースをロードする方法が生まれます。

これらを使用するには、まず gwt-incubator をダウンロードします。次に、必要なライブラリを module.gwt.xml に追加します。

<!-- immutable resources and injecting styles -->
<inherits name="com.google.gwt.libideas.ImmutableResources" />
<inherits name="com.google.gwt.libideas.StyleInjector" />

それが完了したら、CSS ファイルをコードリソースとして作成します。私は「org.project.client.resources.*」のようにソースパスに入れています。これらは、header.css、body.css、table.css などの個別のセグメントに保持できます。気が狂って、本当に好きなだけ物を分けてください。ファイルパスは「/src/org/project/client/resources/header.css」のようになります。

次に、CSS インターフェイスを作成します。ここで、この外観でできる特別なことがいくつかあります。しかし、私は基本的なものに行きました。

import com.google.gwt.libideas.resources.client.CssResource;

public interface Css extends CssResource {

}

CssResource クラスを作成したので (別のクラスを作成することもできます)、すべての CSS ファイルをラップする不変のリソースバンドルを作成する必要があります。

import com.google.gwt.core.client.GWT;
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle;

public interface ResourceBundle extends ImmutableResourceBundle {

    public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class);

    /*
     * =============================
     * CSS
     * =============================
     */

        @Resource("org/project/client/resources/header.css")
        public Css headerCss();

        @Resource("org/project/client/resources/body.css")
        public Css bodyCss();
}

これにより、コンパイル時に不変の CSS リソースへのリンクが作成されます。これらの CSS リソースを何らかの方法でモジュールに入れる(挿入する)必要があります。ここで StyleInjector の出番です。

次のようなコードをエントリポイントの「onModuleLoad」メソッドに挿入します。

StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText());
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText());

GWT で同じ効果を達成する方法は他にもあるかもしれませんが、CssResource の機能は、ここで説明したこと以外にも活用できます。例: 私のプロジェクトの 1 つで、IE と Firefox が正しいと思われるものをレンダリングするために、CSS を少し変更する必要があります。次のように、global.css に 2 つの小さなブラウザー固有のセクションがあります。

/* fix ie floating quirk */
@if user.agent ie6 ie7 ie8 {
    #someElement {
        top: -21px;
        right: 5px;
    }
}

/* fix firefox floating quirk */
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 {
    #someElement {
        top: -14px;
    }
}

このロジックを JavaScript/Java から除外できるのは素晴らしいことです。GWT はそれを必要とするブラウザーに対してのみインジェクションを行うため、ここでは小さな最適化も行われています。(ブラウザーに基づく据え置きバインディングは、GWT で多くのことがどのように機能するかです。)

したがって、インライン CSS を提供するメカニズムは、CSS の分離を維持しながら、他の利点も提供します。

愛してはいけないことは何ですか？

score 1 · Accepted Answer

基本的に、TCP 接続を開いてファイルを要求するには時間がかかるため、ページのすべてのファイルをロードするのにかかる時間を短縮できます。

また、とにかくそのファイルをロードする場合、最終的には同じ量の帯域幅になります。ファイルサイズを小さくするよりも、転送時間を短くする方がよいでしょう。

score 1 · Accepted Answer

インライン CSS には、外部スタイルシートを上書きし、必要に応じて常に最新の CSS リビジョンを使用するという利点があります。欠点は、明らかにページ固有であり (そのため、プレゼンテーションをマークアップから分離するという CSS の意図を薄めます)、全体的にファイルのサイズが大きくなることです (CSS はキャッシュされず、毎回再ロードされるため)。すべてのページ - inline-css について最後に読んでから何かが変更されていない限り)。

外部スタイルシートには、キャッシュされるという利点があり (したがって、更新または URI の変更に必要な場合にのみ読み込まれます)、最初のダウンロード時間/ファイルサイズまで増加しますが、その後、再読み込みする必要はありません (必要）。

また、もちろん、ローカルコピーが存在する場合、スタイルシートを参照する他のすべてのページは CSS ファイルをダウンロードしません。(URI が一貫して同じファイルを参照している限り、ページが 1 つまたは複数のドメインにあるかどうかは問題ではないと思いますが、間違っている可能性があります。)

score 1 · Accepted Answer

ただし、ほとんどの場合、この速度の低下はほとんど目立たないため、HTML を CSS から分離することをお勧めします。したがって、ページのすべての部分を最適化することが本当に重要な場合にのみ、これを行ってください。また、CSS を直接インライン化するのではなく、インラインで CSS を生成する何らかのオブジェクト/類似のものを使用することを検討してください。そうすれば、CSS を別のファイルに保持し、それを必要とするページにインラインで含めることができます (ほとんどの場合そうではありません)。

css - CSS を含む GWT Html ファイル

4 に答える 4

Related

Reference