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群 ...
随机推荐
- 微信小程序的标签和html标签比较
html 小程序 <div></div> <view></view> <h1><h2>....<h6> <p& ...
- Docker部署Python爬虫项目
1) 首先安装docker: # 用 yum 安装并启动 yum install docker -y && systemctl start docker 2) 下载自定义镜像需要用到的 ...
- 单独安装jenkins-没有tomcat
这里讲解war包的安装:windows的msi版安装很简单,双击即可,不用讲 1.官网下载 2. 3.把war包放到java目录下 4. 5.安装完成后打开:127.0.0.1:8080 输入密码后会 ...
- svn使用2(转)
首先打开VisualSVN Server Manager,如图: 可以在窗口的右边看到版本库的一些信息,比如状态,日志,用户认证,版本库等.要建立版本库,需要右键单击左边窗口的Repositores, ...
- phpcms数组处理后键值插入(php自带库函数)和自己处理办法比较。
phpcms处理: public function insert($data, $table, $return_insert_id = false, $replace = false) { if(! ...
- linux openjdk安装
sudo apt-get install openjdk-8-jdk 默认提示是 sudo apt-get install openjdk-8-jre, 这个只有jre https://openjdk ...
- [LC] 64. Minimum Path Sum
Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...
- OpenCVSharp对图像进行颜色分割
使用OpencvSharp的InRange函数对图像进行RGB颜色的分割. using System; using OpenCvSharp; using OpenCvSharp.Extensions; ...
- 重复测量的方差分析|Mauchly's Test of Sphericity|
生物统计学-重复测量的方差分析 之前的方差分析应用条件要求组之间是独立的,即某种因素下相同时段测量的结果数据,但4月与5月数据是有关系的,所以必须考虑某种因素下不同时段测量的结果数据,即使用重复测量的 ...
- fiddler模拟返回响应数据
通过find查找修改指定内容 选择find a file 保存后重新发起请求