By

文章目录
  1. 1.前言
  2. 2.嵌入到html中
    1. 2.1.html中嵌入图片base64
    2. 2.2.html中嵌入样式文件
    3. 2.3.html中嵌入脚本资源
    4. 2.4.html中嵌入页面文件
  3. 3.嵌入到js中
    1. 3.1.在js中嵌入js文件
    2. 3.2.在js中嵌入图片base64
    3. 3.3.在js中嵌入其他文本文件
  4. 4.嵌入到css中
    1. 4.1.在css文件中嵌入其他css文件
    2. 4.2.在css中嵌入图片的base64
  5. 5.代码

前言

为了减少请求数量，嵌入资源到 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

我的博客

文章目录
  1. 1.前言
  2. 2.嵌入到html中
    1. 2.1.html中嵌入图片base64
    2. 2.2.html中嵌入样式文件
    3. 2.3.html中嵌入脚本资源
    4. 2.4.html中嵌入页面文件
  3. 3.嵌入到js中
    1. 3.1.在js中嵌入js文件
    2. 3.2.在js中嵌入图片base64
    3. 3.3.在js中嵌入其他文本文件
  4. 4.嵌入到css中
    1. 4.1.在css文件中嵌入其他css文件
    2. 4.2.在css中嵌入图片的base64
  5. 5.代码