答案在于 GWT 的运行方式。由于 GWT 每个模块加载只有一个页面加载，因此内联缓存并没有真正发挥作用。
如果您只想得到答案：内联 CSS 减少了加载组成项目的所有文件所需的 TCP/IP 连接数量。考虑到您可能有多个 CSS 文件、高延迟和其他网络条件，这可能很重要。在我的工作（州政府）中，并不总是能保证你有一个“粗管道”。
GWT（或者至少是gwt-incubator）有一种将内联CSS的优化与信息和布局的分离相结合的机制。
输入 ImmutableResources 和 StyleInjector。这两件事（组合起来）导致了一种加载不可变（编译后）资源的方法。
要使用它们，请首先下载 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 文件：code资源。我将我的保留在源路径中，例如“org.project.client.resources.*”。您可以将它们保存在单独的段中，例如：header.css、body.css、table.css。疯狂吧，真的按照你想要的方式把事情分开。您的文件路径应类似于“/src/org/project/client/resources/header.css”。
现在，创建 CSS 界面。现在，您可以用它做一些相当特别的事情看这里 http://code.google.com/p/google-web-toolkit-incubator/wiki/CssResource。但我只是选择了基本的。
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 资源的链接。现在我们需要put以某种方式将这些 CSS 资源（插入）到模块中。这就是 StyleInjector 的用武之地。
我将类似于以下内容的代码放入入口点的“onModuleLoad”方法中。
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText());
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText());
可能还有其他方法可以在 GWT 中实现相同的效果，但 CssResource 的强大功能可以用于比我在这里介绍的更多的事情。例如：在我的一个项目中，我需要对 CSS 进行一点小小的更改，以使 IE 和 Firefox 能够正确呈现我认为正确的内容。我的 global.css 中有两个特定于浏览器的小部分，如下所示：
/* 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 分离的同时还提供了其他好处。
不去爱的种种？
