base64:是一種基於64個可打印字符來表示二進制數據的表示方法。經常使用於在一般處理文本數據的場合，表示、傳輸、存儲一些二進制數據，包括MIME的電子郵件及XML的一些複雜數據。webpack
可打印字符：在顯示器上輸出且可以看見。ASCII 32~128。git
上文64個可打印字符特指：A-Z、a-z、0-9，其他兩個可打印字符（不一樣系統不一樣的字符）。github
應用例子：web
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D"/>瀏覽器
【Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入，減小http請求。可是瀏覽器不會緩存這種數據。】緩存
data URI 的格式： data:[<mediatype>][;base64],<data>網絡
【Data URI中，data表示取得數據的協定名稱，image/png 是數據類型名稱，base64 是數據的編碼方法，逗號後面就是這個image/png文件base64編碼後的數據。】性能
與webpack的關聯：編碼
url-loader: Loads files as base64 encoded URL。url
用法：url-loader 功能相似於 file-loader，可是在文件大小（單位 byte）低於指定的限制時，能夠返回一個 DataURL。
{ loader: 'url-loader', options: { limit: 8192 //小於這個字節數就會用base64的方式編碼數據，而後嵌入到網頁中。 } }
link: https://www.webpackjs.com/loaders/url-loader/
優缺點：（摘自掘金文章）
- Base64會讓樣式文件變得很大，從而阻塞關鍵下載和渲染。
- 樣式文件增長的體積沒法經過Gzip很好地壓縮。
- 在緩存方面，本能夠分別設置緩存策略的圖片和樣式表也混在一塊兒，沒法區別更新。
- 在瀏覽器渲染方面，也增長了解析CSS樹的耗時。
- 在CSS文件中過多使用Base64時，會讓首次渲染時間（First Paint）增長2倍以上，在移動端，因爲網絡和手機性能的緣故，這一時間可能會增長10倍以上。
link：https://juejin.im/entry/58ca2b9dac502e0058868693