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

前言

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

嵌入到html中

采用资源链接加?__inline的方式

html中嵌入图片base64

html中嵌入样式文件

html中嵌入脚本资源

html中嵌入页面文件

嵌入到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

我的博客