前端自動化構建工具 - FIS3 - 第二節(jié):嵌入資源

前言

為了減少請求數量被盈,嵌入資源到 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

我的博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末邓尤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子贴谎,更是在濱河造成了極大的恐慌汞扎,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件擅这,死亡現(xiàn)場離奇詭異澈魄,居然都是意外死亡,警方通過查閱死者的電腦和手機仲翎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門痹扇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人溯香,你說我怎么就攤上這事鲫构。” “怎么了玫坛?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵结笨,是天一觀的道長。 經常有香客問我,道長炕吸,這世上最難降的妖魔是什么伐憾? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮算途,結果婚禮上塞耕,老公的妹妹穿的比我還像新娘蚀腿。我一直安慰自己嘴瓤,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布莉钙。 她就那樣靜靜地躺著廓脆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪磁玉。 梳的紋絲不亂的頭發(fā)上停忿,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音蚊伞,去河邊找鬼席赂。 笑死,一個胖子當著我的面吹牛时迫,可吹牛的內容都是我干的颅停。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼掠拳,長吁一口氣:“原來是場噩夢啊……” “哼癞揉!你這毒婦竟也來了?” 一聲冷哼從身側響起溺欧,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤喊熟,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后姐刁,有當地人在樹林里發(fā)現(xiàn)了一具尸體芥牌,經...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年聂使,在試婚紗的時候發(fā)現(xiàn)自己被綠了胳泉。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡岩遗,死狀恐怖扇商,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情宿礁,我是刑警寧澤案铺,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站梆靖,受9級特大地震影響控汉,放射性物質發(fā)生泄漏笔诵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一姑子、第九天 我趴在偏房一處隱蔽的房頂上張望乎婿。 院中可真熱鬧,春花似錦街佑、人聲如沸谢翎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽森逮。三九已至,卻和暖如春磁携,著一層夾襖步出監(jiān)牢的瞬間褒侧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工谊迄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留闷供,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓统诺,卻偏偏與公主長得像歪脏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子篙议,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案唾糯? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,734評論 1 92
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過鬼贱?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8
  • 前言 來到新公司移怯,接手一個一年前的老項目,項目技術棧為fis3+vue1+requireJs+less这难,從而接觸到...
    TheoLin閱讀 804評論 0 0
  • 天剛黑 閻羅王一聲令下 度朔山上 黑洞洞的鬼門關 嘩啦啦打開 腥紅的火焰門 大大小小的鬼啊 厲聲歡叫著 沖出關了一...
    江恨雨閱讀 375評論 1 3
  • 我靜靜地坐在窗前舟误,把腦袋擱在窗臺上,享受這久違的熟悉的早晨姻乓,恍惚間看到小時候的我嵌溢,在某個夏天的清晨,從床上爬起了蹋岩,...
    文蟲閱讀 348評論 13 8