webpack url-loader limit 轉換部分資源爲base64格式 其餘不轉換

在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裏然後引用，效果一樣。