前端自动化构建工具 - FIS3 - 第二节:嵌入资源

2016-11-22  本文已影响76人  会煮咖啡的猫咪

前言

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

我的博客

上一篇 下一篇

猜你喜欢

热点阅读