美文网首页
前端自动化构建工具 - FIS3 - 第二节:嵌入资源

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

作者: 会煮咖啡的猫咪 | 来源:发表于2016-11-22 15:15 被阅读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

我的博客

相关文章

  • FIS3和VueJS开发单页面应用

    FIS3是百度开发的一款前端构建工具。 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步...

  • 从配置文件带你认识FIS3

    不认识FIS3? 那赶紧去看看吧:FIS3 , 为你定制的前端工程构建工具, 解决前端开发中自动化工具、性能优化、...

  • 百度亲民前端构建工具fis3

    什么是fis3? FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、...

  • 利用fis3构建前端项目工程

    利用fis3构建前端项目工程 [TOC] FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工...

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

    前言 为了减少请求数量,嵌入资源到 html、js、css 文件中。 嵌入到html中 采用资源链接加?__inl...

  • FIS的简单用法,好费劲。

    FIS介绍 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管...

  • fis3入门(百度出品)

    FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内...

  • windows7下fis3的安装

    最近在学习前端自动化构建工具fis3,安装fis3需要先安装node.js,现在梳理一下在安装过程中遇到的一些问题...

  • gulp

    叫做前端自动化构建工具,此类工具还有:grunt前端自动化构建工具 是什么?答: 自动化 less sass ...

  • 前端知识汇总

    自动化构建工具 Grunt Gulp fis3 包管理工具 npm bower yarn 模块打包工具 Brows...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/onnppttx.html