关于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 相关文章推荐
javascript,jquery闭包概念分析
Jun 19 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
js继承的这6种方式!(上)
Apr 23 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
vue引入静态js文件的方法
Jun 20 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
薪资那么高的Web前端必看书单
2017/10/13 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
Python字典简介以及用法详解
2016/11/15 Python
python简单实现AES加密和解密
2019/03/28 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
开学典礼感言
2014/02/16 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
关于nginx 实现jira反向代理的问题
2021/09/25 Servers