在Vue-cli中,咱們默認使用webpack將全部的小於限制數值的資源轉爲base64格式:以下:css
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10, } }, /*limit: 10,限制 圖片大小 10B,小於限制會將圖片轉換爲 base64格式*/
這樣作的好處是:將資源轉化爲base64能夠儘量的減小網絡請求次數、提早加載圖片(網絡很差時候提早顯示圖片),可是也有很大的缺點,這也是這篇文章主要想表達的問題。vue
使用base64的缺點大概有:
一、若轉化的圖片太大,致使數據太大,加載過慢,因此通常像Vue在limit一般默認設置的是10000B。
二、使用base64的資源將不會擁有緩存,即若是些張圖片被用來作爲有頻率切換動畫(例如自定義模擬喇叭播放的動畫)這樣就會因爲圖片沒有緩存而反覆請求致使其餘的資源請求排隊,pending時間從幾秒到一分鐘不等的問題。
三、在微信小程序裏,咱們知道背景圖片是隻能使用base64格式的,但如果其餘的靜態資源不想使用base64又該如何呢?webpack
下面這種狀況是對於不一樣格式的圖片的定義方法,能夠根據不一樣格式的圖片作自定義配置:web
//webpack.js 中loader配置 { test: /\.(gif|jpg)$/, loader: 'url-loader?limit=10000', options: { name: '[name].[ext]?[hash]' } }, { test: /\.(png|svg)$/,//(png|jpg|gif|svg) loader: 'url-loader', options: { limit: 10, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }
假如咱們想使用一部分base64格式的圖片(音頻、視頻),作法以下:小程序
/*webpack.base.conf.js*/ module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10, name: 'static/images/[name].[ext]', } } ] } /* page/index.vue */ <script> let { image_k1 } = { // !註釋很重要 /* eslint import/no-webpack-loader-syntax: off */ image_k1: require('!url-loader?limit=10000!../../static/images/image_k1.png') } </script> <template> <div :style="{backgroundImage:url(`${image_k1}`)}"></div> </template>
這樣就完成了某些資源是base64,其餘資源不變的效果。固然 你也能夠選擇直接在線轉換後放到css裏而後引用,效果同樣。微信小程序