前言
为了减少请求数量,嵌入资源到 html、js、css 文件中。
嵌入到html中
采用资源链接加?__inline
的方式
html中嵌入图片base64
<img title="fis3 logo" src="images/logo.gif?__inline"/>
html中嵌入样式文件
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
html中嵌入脚本资源
<script type="text/javascript" src="demo.js?__inline"></script>
html中嵌入页面文件
<link rel="import" href="demo.html?__inline">
嵌入到js中
在js中,使用编译函数 __inline() 来提供内容嵌入能力。
在js中嵌入js文件
__inline('demo.js');
在js中嵌入图片base64
var img = __inline('images/logo.gif');
在js中嵌入其他文本文件
var css = __inline('a.css');
嵌入到css中
与html类似,添加?__inline
在css文件中嵌入其他css文件
@import url('demo.css?__inline');
在css中嵌入图片的base64
.style {
background: url(images/logo.gif?__inline);
}
代码
https://github.com/hans007/JavaScriptCodes/tree/master/fis3/inline