摘要：使用的资源将不会拥有缓存，即如果些张图片被用来做为有频率切换动画例如自定义模拟喇叭播放的动画这样就会由于图片没有缓存而反复请求导致其他的资源请求排队，时间从几秒到一分钟不等的问题。当然你也可以选择直接在线转换后放到里然后引用，效果一样。
在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 */
这样就完成了某些资源是base64，其他资源不变的效果。当然 你也可以选择直接在线转换后放到css里然后引用，效果一样。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100646.html
摘要：既生瑜，何生亮人家当然不是以卖萌为生的，卖萌不可耻，但是是有它的用处的。对未设置或者小于设置的图片进行转换，以的格式被的所使用而对于大于的图片用进行解析。配置工欲善其事必先利其器。 url-loader vs file-loader 既生瑜，何生亮？ 人家当然不是以卖萌为生的，卖萌不可耻，但是url-loader是有它的用处的。url-loader对未设置或者小于limit设置的图片进...
摘要：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。插件的使用一般是在的配置信息选项中指定。到这里基本配置已经告一段落了，所有配置我已经放在仓库中第二期优化教程已出欢迎关注和提问 1、了解Webpack相关 什么是webpack Webpack是一个模块打包器(bundler)。 在Webpack看来, 前端的所有资源文件(js/js...
摘要：官方的文档模块受到影响的选项。官方文档通过注入标签将添加到。官方文档这两者一般都是配合在一起用的。代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成码引用。不过它的放后面。 第一篇讲了Webpack的安装，以及配置文件的 entry，devtool，output，resolve。这篇接着说配置文件的 module。想看看第一篇的朋友可以点 这里。 ...
摘要：它将包括如何处理图片以及对老版本的语言的转换。添加使用最好的方式是在文件中指定它们。而相反，文件被转换为了。它允许你使用转译文件。此外，我们还学习如何使用处理图片。在教程未来的部分，我们会深入到中，包括写一个我们自己的。 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概...
阅读 1073·2021-11-16 11:45
阅读 3071·2021-10-13 09:40
阅读 677·2019-08-26 13:45
阅读 1139·2019-08-26 13:32
阅读 2133·2019-08-26 13:23
阅读 863·2019-08-26 12:16
阅读 2792·2019-08-26 11:37
阅读 1718·2019-08-26 10:32
