可以将所有资源（JavaScript、CSS、字体、图像）放在一个大的（可缓存的）JavaScript 文件中。该文件看起来很乱（因为一些冗长的 CSS 和 Base64 字符串），但不要让这让你失望；您可以使用代码生成从其单独的组件编译 JavaScript 文件（见下文）。
演示： http://jsfiddle.net/PgdXd/
CSS
将整个样式表放在一个字符串文字中（不要忘记转义引号和换行符）并将其嵌入到动态创建 style 元素的 JavaScript 语句中。
$('head').append("<style> ......... </style>");
注意：我在这里使用 jQuery，但纯 JavaScript 也可以。
上述声明在旧版网络浏览器中可能无效。有关替代方案，请参阅：How to dynamically create CSS class in JavaScript and apply?
字体
在样式表中嵌入 Base64 编码的字体文件，如下所述：http://sosweetcreative.com/2613/font-face-and-base64-data-uri
@font-face {
font-family: 'latoregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,........) format('woff');
font-weight: normal;
font-style: normal;
}
如前所述，这应该嵌入到保存样式表的 JavaScript 语句中：
$('head').append("<style> @font-face { font-family:'latoregular'; src: url(data:application/x-font-woff;charset=utf-8;base64,........) format('woff'); font-weight:normal; font-style:normal; } .... </style>");
图片
有两种口味。背景图像可以在样式表中指定，就像我们对字体所做的那样：
.logo1 { background-image: url(data:image/png;base64,.......); }
第二种风格是常规图像。在 HTML 文件中，使用带有空 src 属性的 img 标记。
<img alt="" src="" class="icon1" />
使用 javascript 填充 src 属性。整个 Base64 字符串是嵌入在 JavaScript 语句中的字符串文字。
$('.icon1').attr('src', 'data:image/png;base64,.......');
$('.icon2').attr('src', 'data:image/png;base64,.......');
CSS 类确定哪些数据属于哪个img 标签。在包含此 JavaScript 文件的一个或多个 HTML 页面中未使用某个类是可以的。 Base64 字符串只是被传递了一点；其他基于 JavaScript 的方法也涉及相同的可忽略的开销。
代码生成
这是一个使用 bash 脚本的简单示例。但请随意使用 Perl 或 T4 或任何您喜欢的语言或工具。
gendatauri.sh：输出一个数据URI；参数是文件名和（可选）MIME 类型。
#!/bin/bash
echo "data:${2:-$(file -bi $1)};base64,$(base64 -w0 $1)"
genimgsrc.sh：生成jQuery语句来填充<img>元素的src属性；参数是文件名。
#!/bin/bash
filename=$1
basename=${filename##*/}
classname=${basename%.*}
echo "\$('.$classname').attr('src','$(./gendatauri.sh $filename)');"
gencss.sh：你的样式表；使用$(./gendatauri.sh FILENAME [MIMETYPE]) 注入文件数据。示例：
#!/bin/bash
cat << EOF
@font-face {
font-family: 'latoregular';
src: url($(./gendatauri.sh latoregular.woff "application/x-font-woff;charset=utf-8")) format('woff');
font-weight: normal;
font-style: normal;
}
.logo1 {
background-image: url($(./gendatauri.sh icon1.png));
}
EOF
genjs.sh：将所有不同的组件组合到一个 JavaScript 文件中。示例：
#!/bin/bash
# CSS, including fonts and background images
(
echo '$("head").append("<style>\n'
./gencss.sh
echo '\n</style>");'
) | tr '\n' ' '
echo
# images
./genimgsrc.sh icon1.png
./genimgsrc.sh icon2.png
# JavaScript
cat YourOwnFunctions.js
运行它并重定向其输出以生成最终的 JavaScript 文件。确保.png、.woff 和其他资源文件在您这样做时存在。
./genjs.sh > GeneratedJavaScriptFile.js
在每个 HTML 文件中包含 JavaScript 文件：
<script src="GeneratedJavaScriptFile.js"></script>
为了清楚起见：在 Web 服务器上，您只需要 GeneratedJavaScriptFile.js 和 .html 文件；原始资源文件不需要在那里。