在Vue-cli中,我們默認使用webpack將所有的小於限制數值的資源轉爲base64格式:如下:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10,
}
},
/*limit: 10,限制 圖片大小 10B,小於限制會將圖片轉換爲 base64格式*/
這樣做的好處是:將資源轉化爲base64可以儘可能的減少網絡請求次數、提前加載圖片(網絡不好時候提前顯示圖片),但是也有很大的缺點,這也是這篇文章主要想表達的問題。
使用base64的缺點大概有:
1、若轉化的圖片太大,導致數據太大,加載過慢,所以一般像Vue在limit通常默認設置的是10000B。
2、使用base64的資源將不會擁有緩存,即如果些張圖片被用來做爲有頻率切換動畫(例如自定義模擬喇叭播放的動畫)這樣就會由於圖片沒有緩存而反覆請求導致其他的資源請求排隊,pending時間從幾秒到一分鐘不等的問題。
3、在微信小程序裏,我們知道背景圖片是隻能使用base64格式的,但若是其他的靜態資源不想使用base64又該如何呢?
下面這種情況是對於不同格式的圖片的定義方法,可以根據不同格式的圖片做自定義配置:
//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裏然後引用,效果一樣。