webpack url-loader limit 转换部份资本为base64花样 其他不转换

2019年8月20日 368次阅读 来源: 不会飞的Porco

在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里然后援用，结果一样。

    原文作者：不会飞的Porco
    原文地址: https://segmentfault.com/a/1190000017745449
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞