webpack压缩图片之项目资源优化
webpack
打包时,会根据webpack.config.js
中url-loader
中设置的limit大小来对图片进行处理,小于limit的图片转化成base64
格式,其余的不做操作。对于比较大的图片我们可以用image-webpack-loader
来压缩图片。
npm install image-webpack-loader --save-dev
在 webpack.config.js
中配置:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[
{
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
loader: 'image-webpack-loader',// 压缩图片
options: {
bypassOnDebug: true,
}
}
]
}
最初打包压缩后整个包有11.4M,查了下发现是引入的苹果字体库就有11多M,删除了该大包袱后,整个包资源锐减到3.24M,后再次进行图片的压缩,就用上面的方法,体积缩减到2.16M,将项目中png图片在线转换为jpg后,体积再次缩减到1.82M。
因为代码要放到腾讯云上面,涉及到带宽流量问题,我们进行了整个包资源的优化,最后用户下载的话就只需下载1.82M的流量包即可。
经过业务逻辑叠加,我们打包后代码到了2M了,我们老大需要check我的包代码,发现里面有map文件没有去掉,然后我又进行了map文件的清理:
运行 cnpm run build 开始打包后会在项目目录下自动创建dist目录,打包好的文件都在其中
解决办法:去src/config/index.js中改一个参数:
productionSourceMap:false
把这个改为false。不然在最终打包的文件中会出现一些map文件
map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
然后2M多的项目去掉map文件打包后仅剩775K,不足1M的量,突然发现以前我写的项目包应该都是蛮大的吧[捂脸],对不起使用我写的项目的用户鸭,真是抱歉啊,没有真实为着用户着想,我的锅!
【完】
进一寸有一寸的欣喜
webpack压缩图片之项目资源优化的更多相关文章
- vue使用webpack压缩后体积过大要怎么优化
vue使用webPack压缩后存储过大,怎么优化 在生产环境去除developtool选项 在webpack.config.js中设置的developtool选项,仅适用于开发环境,这样会造成打包成的 ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
- Joomla - 优化(时区、google字体、压缩图片、压缩自定义代码)
Joomla - 优化(时区.google字体.压缩图片.压缩自定义代码) 一.时区 发布文章是往往会发现发布时间和当前时间对不上,原因是 Joomla 用的是国际标准时间,和中国时区大约相差8小时, ...
- 小型 Web 页项目打包优化方案
背景 目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...
- 【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...
- webpack--初试webpack( 核心、体验、资源打包)
前言 webpack是当前前端项目中最常用的资源构建工具,从本文开始,来总结记录一下关于webpack的学习. 正文 1.webpack简介 webpack官网(https://webpack.doc ...
- webpack2使用ch10-处理图片(png jpg svg 等) 限制图片 压缩图片
1 目录展示 安装依赖 "file-loader": "^0.11.1", "image-webpack-loader": "^3 ...
- 【厚积薄发】Crunch压缩图片的AssetBundle打包
这是第133篇UWA技术知识分享的推送.今天我们继续为大家精选了若干和开发.优化相关的问题,建议阅读时间10分钟,认真读完必有收获. UWA 问答社区:answer.uwa4d.com UWA QQ群 ...
随机推荐
- VSTO开发中级教程 配套资源下载
项目实例源代码: 编程过程中用到的工具.软件: 教学视频:
- nodejs 模块变量 应用
exports.allcodeandname=(function(){ var fs = require('fs'); var data = fs.readFileSync(__dirname+'/a ...
- VRRP笔记一:基本简介(注意iptables和selinux的问题)
LAN客户端判定哪个路由器应该为其到达目标主机的下一跳网关的方式有动态及静态决策两种方式,其中,觉的动态路由发现方式有如下几种: 1.Proxy ARP —— 客户端使用ARP协议获取其想要到达的目标 ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLDataException: '2.34435678977654336E17' in column '3' is outside valid range for the datatype INTEGER.
### Error querying database. Cause: java.lang.reflect.UndeclaredThrowableException### The error may ...
- 实战:CentOS 7.2 / Zabbix3.4安装graphtrees
众所周知的 Zabbix图形显示问题,决定使用graphtrees 插件. 环境:CentOS7.2 + Zabbix 3.4 1)首先切换到root用户以获得足够的权限将资源下载到 /usr/sha ...
- CHI 2015大会:着眼于更加个性化的人机交互
2015大会:着眼于更加个性化的人机交互" title="CHI 2015大会:着眼于更加个性化的人机交互"> 本周,人机交互领域的顶级盛会--2015年ACM C ...
- Spring中的事件处理
文章目录 Spring中的事件处理 Spring 的核心是 ApplicationContext,它负责管理 beans 的完整生命周期.当加载 beans 时,ApplicationContext ...
- 用了python多进程,我跑程序花费的时间缩短了4倍
应用场景:本人需要对200万条网页html格式数据进行清洗,提取文字后将分词结果写入数据库,之前做了一次,大概花费了80多个小时才跑完.机器配置是4核,内存8G:开完会领导让再改点东西重新跑一遍,然后 ...
- fiddler 针对单个接口打断点
在命令行输入相关指令: 以慕课网为例: 请求前设置断点:bpu 实例: bpu https://www.imooc.com/index/getstarlist 请求 https://www.imooc ...
- nGrinder 介绍与安装
nGrinder是基于Grinder开源项目,但由NHN公司的nGrinder开发团队进行了重新设计和完善(所以叫做nGrinder). 它是由一个controller和连接它的多个agent组成,用 ...