关于Vue背景图打包之后访问路径错误问题的解决


Posted in Javascript onNovember 03, 2017

案例环境

通过vue-cli脚手架创建的vue项目

在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的

首先,出错点在url-loader上面。

// url-loader配置
// build/webpck.base.conf.js
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

这里解释一下上面这段url-loader配置,test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,直白点就是所以的图片(png,jpg,jpeg,gif,svg)。然后用url-loader进行处理。处理也有个规则如下,当不大于10000B的文件进行base64转码,就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]') 这个目录下(从build/utils.js和config/index.js可以知道这个路径就是static/img目录,并且图片名是进行hash之后的值,根目录下面没有static目录,所以会创建一个static目录,至于为什么最后没有看见这个目录后续再说),当我们创建了一个这样的目录之后,所以的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定,如果小于10KB的图片转为base64,大于10KB的图片已经将图片路径改为了static/img/'图片名',然后我们继续来理清访问路径的事情。

// 目前我们的目录结构
index.html
static
  |--img
    |--'picname'
  |--css
    |--app.css
  |--js
    |--app.js

我们知道img为html标签,他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片的,所以img的路径没问题,然后app.css访问static/img/'图片名'是访问错误的,因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。

解决办法

1、使用小图片作为背景图片(建议):

将小于10KB的图片作为背景图片,如果有大于10KB的图片作为img图片。

2、修改url-loader的limit值(不建议):

从上面分析可知,当图片转为base64就没有路径错误的问题,保证自己的背景图片都能转为base64就可以防止该错误发生,将limit的值改为你的背景图最大那一张的值还大一点就行,换算为B的单位

3、将css不要单独打包出来(不建议):

直接通过css-loader和style-loader打包到js中,js自动创建style标签,这样,背景图片的访问路径就是通过index.html路径访问了,不过该解决方案也不建议。会导致js过大,和图片过大不建议转base64一个道理。

4、使用绝对路径的图片地址路径(建议)

建议:使用小图片作为背景图片,大图片用img标签。首先得分清背景图片和图片img的一些区别,就各人理解而言,背景图片是用来修饰网页的,与实际内容无关的东西,使用背景图片。如果与内容有关的东西都应该使用img标签算作网页结构的内容。修饰的图片尽量的小,也可以使用图片压缩等策略减小图片大小。

不建议:不建议修改limit值的原因是,url-loader的配置是针对整个项目的图片,修改了limit值也等于让html中img标签的图片也跟着进行了base64的转换,而对于base64的转换的缺点是他会增大图片原本的体积,如果对大图进行了转base64会造成你的js文件过大,从而增加了加载js时间过长。

关于base64

优点:base64就是一串字符串码来表示的图片,在加载页面或者js的时候就一并加载过来,减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道,http请求每次建立都会占用一定的时间,对于小图请求来说,可能http建立请求的时间比图片下载本身还长。所以对小图进行base64转码是优化http请求,保证页面加速渲染的一种手段。

缺点:base64缺点就是之前提到的,他会增加图片本身的大小,对小图片来说,增加大小导致js的请求增长完全能弥补多一个http请求的建立的时长,这种取舍是划算的。可是对于大图来说,这样的取舍是不划算的。

举个例子

例子:(以下数据都是随便模拟,看看思路就行)
假如每次建立http时长为0.1s,网络传输为100KB/s,每次转base64增加体积为百分之二十;

  1. 一张10KB的图片通过http请求下载为0.2s,他转为base64之后为12KB,在js下载中,增加了12KB的大小,所以增加0.12S 所以转base64能优化0.08s的页面加载速度;
  2. 一张100KB的图片通过http请求的速度是1.1s。转base64之后大小为120KB,他会增加js的大小120KB,所以增加加载时间1.2s。这样一算下来,转为base64之后,并不能优化页面加载速度,反而拖慢了0.1s的加载速度,为不划算。

思考:

在开发过程中,处理加载速度之外我们还得考虑并行下载的问题。如果全在一个js中,这个js没下载完成之前,图片也是没有下载的,也就是转base64之后,可以认为js和图片是串行下载的。而走http请求,图片是可以和js并行下载的。所以实际上需要更小的图片才能更划算

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 #Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
nginx配置React静态页面的方法教程
Nov 03 #Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php实现可逆加密的方法
2015/08/11 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JS对象与json字符串格式转换实例
2014/10/28 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python中的super用法详解
2015/05/28 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
美术专业学生个人自我评价
2013/09/19 职场文书
会计主管岗位职责
2014/01/03 职场文书
小学教育见习总结
2015/06/23 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
如何写好闭幕词
2019/04/02 职场文书