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

前言

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

我的博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,598评论 0 8
  • 前言 来到新公司,接手一个一年前的老项目,项目技术栈为fis3+vue1+requireJs+less,从而接触到...
    TheoLin阅读 4,264评论 0 0
  • 天刚黑 阎罗王一声令下 度朔山上 黑洞洞的鬼门关 哗啦啦打开 腥红的火焰门 大大小小的鬼啊 厉声欢叫着 冲出关了一...
    江恨雨阅读 2,999评论 1 3
  • 我静静地坐在窗前,把脑袋搁在窗台上,享受这久违的熟悉的早晨,恍惚间看到小时候的我,在某个夏天的清晨,从床上爬起了,...
    文虫阅读 2,806评论 13 8

友情链接更多精彩内容