详解webpack之图片引入-增强的file-loader:url-loader


Posted in Javascript onOctober 08, 2018

前言:

本文介绍了url-loader(增强的file-loader);

url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面;从而减少服务器请求。优化性能。

url-loader解决的问题:

如果图片较多,会发很多http请求,会降低页面性能。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢?

简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。

通过上面的介绍,我们可以看到,url-loader工作分两种情况:

1.文件大小小于limit参数,url-loader将会把文件转为DataURL;

2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

正文:

代码和项目目录用的还是上一篇《webpack之引入图片》。

url-loader可以看作是增强版的file-loader。

url-loader把图片编码成base64格式写进页面,从而减少服务器请求。

安装url-loader

npm i -D url-loader

配置webapck.config.js

详解webpack之图片引入-增强的file-loader:url-loader

执行 npm run build

在dist目录下面找到build成功的index.html页面。在浏览器的控制台中可以看到图片以base64的格式加载进页面。

详解webpack之图片引入-增强的file-loader:url-loader

现在我们做一些优化,如果图片大小小于50kb则以base64的格式加载,否则以图片地址方式加载。

详解webpack之图片引入-增强的file-loader:url-loader

补充:简单介绍下url-loader的配置

其实跟file-loader相比差不多,url-loader会按照配置把小于一定大小的图片以dataUrl的形式储存。

引用方式与上面相同:loader的配置如下:

{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8000&name=img/[name]-[hash:5].[ext]',//小于8kb的图片以dataurl的方式存储

}

补充一个:如何打包html文件中的图片呢?

首先安装相应的loader:

$ npm install html-withimg-loader --save-dev1

在webpack.config.js中做相应的配置:

module: {
loaders: [


{



test: /\.html$/,



loader: 'html-withimg-loader'


}

]
}

最后在入口的js文件中引入html

import '../index.html';

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

Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
javascript document.images实例
May 27 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 #Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
webpack@v4升级踩坑(小结)
Oct 08 #Javascript
npm scripts 使用指南详解
Oct 08 #Javascript
webpack4.0 入门实践教程
Oct 08 #Javascript
You might like
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue组件name的作用小结
2018/05/23 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
开始着手第一个Django项目
2015/07/15 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python判断数字是否是超级素数幂
2018/09/27 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
家长寄语大全
2014/04/02 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
工作一年自我鉴定
2019/06/20 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python 中random 库的详细使用
2021/06/03 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers