前言

为了减少请求数量,嵌入资源到 html、js、css 文件中。

嵌入到html中

采用资源链接加

1
?__inline
的方式

html中嵌入图片base64

1
<img title="fis3 logo" src="logo.gif?__inline"/>

html中嵌入样式文件

1
<link rel="stylesheet" type="text/css" href="demo.css?__inline">

html中嵌入脚本资源

1
<script type="text/javascript" src="demo.js?__inline"></script>

html中嵌入页面文件

1
<link rel="import" href="demo.html?__inline">

嵌入到js中

在js中,使用编译函数 __inline() 来提供内容嵌入能力。

在js中嵌入js文件

1
__inline('demo.js');

在js中嵌入图片base64

1
var img = __inline('logo.gif');

在js中嵌入其他文本文件

1
var css = __inline('a.css');

嵌入到css中

与html类似,添加

1
?__inline

在css文件中嵌入其他css文件

1
@import url('demo.css?__inline');

在css中嵌入图片的base64

1
2
3
.style {
      background: url(logo.gif?__inline);
  }

代码

https://github.com/hans007/JavaScriptCodes/tree/master/fis3/inline

我的博客