图片资源压缩 vue.config.js配置优化

最新推荐文章于 2024-08-30 10:14:23 发布
最新推荐文章于 2024-08-30 10:14:23 发布
阅读量2.9k 收藏 5
点赞数 2
分类专栏： 图片资源压缩处理 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happyStudy_/article/details/121614058
版权
为了提高网站加载速度，解决图片大小超过100kb的问题，文章介绍了通过vue.config.js进行gzip压缩和利用image-webpack-loader进行图片压缩的配置方法。首先，通过降低compression-webpack-plugin版本以兼容webpack，然后安装并配置gifsicle进行图片优化，确保图片最大不超过100kb。最后，建议后端配合修改nginx.conf以进一步提升性能。
摘要由CSDN通过智能技术生成

图片资源压缩 vue.config.js配置优化

需求：网站内图片大小不超过100kb

项目中我们会遇到静态文件过大，上线后网页加载慢。
gzip加速
第一步安装依赖：

npm install --save-dev compression-webpack-plugin

（这样会安装最新的版本，如果你webpack版本过低，则会安装失败。）
在这里插入图片描述
会提示以上内容。这里就需要降低compression-webpack-plugin版本，这里我使用的是5.0.1版本

npm install --save--dev compression-webpack-plugin@5.0.1

图片资源压缩

npm install --save image-webpack-loader

使用npm安装命令后，安装失败的话需要调整

cnpm --save install image-webpack-loader
最低0.47元/天 解锁文章
As Before ~
关注
专栏目录
vue.config.js配置gzip文件压缩，图片压缩
zyf1910的博客
05-13 1396
const path = require('path'); const CompressionWebpackPlugin = require('compression-webpack-plugin') const compress = new CompressionWebpackPlugin({ filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240,
vue-cli 图片打包成base64的大小限制配置文件件 vue.config.js
11-17
vue-cli 图片打包成base64的大小限制配置文件件 vue.config.js
vue项目打包压缩静态资源—使用compression-webpack-plugin
最新发布
niuniu2878499107的博客
08-30 890
vue项目打包压缩静态资源—使用compression-webpack-plugin
vue项目文件压缩，图片压缩vue.config.js配置优化
a1983029606的博客
04-14 3882
项目中我们会遇到静态文件过大，上线后网页加载慢。下面我们就来解决这类问题。 gzip加速 第一步安装依赖： npm install --save-dev compression-webpack-plugin 这样会安装最新的版本，如果你webpack版本过低，则会安装失败。 会提示以上内容。这里就需要降低compression-webpack-plugin版本，这里我使用的是5.0.1版本 npm install --save--dev compression-webpack-plug
js/vue图片压缩
weixin_30902251的博客
02-28 472
js版 新建compressImage.js，内容如下： // 将base64转换为blob（有需要可加上，没需要可不加） function convertBase64UrlToBlob(urlData) { var arr = urlData.split(',') var mime = arr[0].match(/:(.*?);/)[1] var bstr = atob(arr[...
vue.config.js 使用image-webpack-loader配置webpack图片压缩
qq_41309583的博客
11-10 1152
vue.config.js 使用image-webpack-loader配置webpack图片压缩
第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
mebell的专栏
09-18 716
npm install image-minimizer-webpack-plugin imagemin imagemin-pngquant --save-dev
Vue CLI4 Vue.config.js标准配置(最全注释)
11-20
Vue CLI4 的 `Vue.config.js` 文件是项目配置的核心，它允许开发者自定义 Webpack 配置，以满足项目的特殊需求。在这个配置文件中，我们可以看到一些常见的设置，包括公共路径、输出目录、静态资源目录以及开发和...
vue.config.js配置打包之类操作 webpack（压缩js，css,图片）
shi19970609的博客
12-28 2111
// vue.config.js的基础配置 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩 const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀 const merge = require("lodash.merge"); //对象合并插件 const U.
vue-cli4 vue.config.js 配置 懒加载图片 gzip 压缩
weixin_46007066的博客
09-24 3024
vue-Cli4 vue.config.js 配置 1、图片资源懒加载 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件： 安装插件 npm install vue-lazyload --save-dev 在入口文件main.js中引入并使用 import VueLazyload from
vue.js 压缩版
11-26
vue.js 压缩版,直接引用虽然方便但是速度还是很慢的。
vue前端图片压缩,js图片压缩技术
东扯葫芦西扯瓜——前端小菜鸟的博客
05-07 1511
vue前端图片压缩,js图片压缩技术 公司项目有拍照上传图片，现在一般手机拍照都会有4M，5M样子，四五兆的图片上传到服务器就卡卡卡，最后失败！我的天啦，容我吐槽下这服务器！ 肿么办？只能前端压缩呗，总不能跟客户说，你去拍张小点的图片来上传，这样体验太不好了！！ 经过一番折腾（少不了百度搜索，到处查阅，你们知道的），终于弄好，现在也将其分享出去，希望能帮到看到这篇文章的你！ 前端压缩图片，基本思路...
vite.config.js压缩图片配置
qq_38687592的博客
06-07 1810
'~': path.resolve(__dirname, './'), // 这个 __dirname 也不报错了 ************publicDir:'public',/*不需要被编译的静态资源目录，（打包图片）默认会把public的图片打包到h5的images里*/// external: ['vue','nutui'], // 注意看这里。publicPath: '/',/*配置打包后的资源路径*/// // 两种方式都可以。// 生产环境移除console。/* 放置静态文件夹目录*/
vue2.0_实现图片上传前进行压缩（约10倍）
QiuRenBB的博客
04-21 2865
前言 1、以VantUI组件库中van-uploader文件上传为例 2、本例以图片大于2M才开始压缩，压缩条件可自行调节 3、压缩完成得到图片的base64格式，可转换成file文件 4、读取到图片之后，上传图片base64格式编码到后台，返回对应ID HTML <van-uploader :after-read="afterReadOne"> <img class="bg_img" src="../../../../assets/images/bg-1.png" v-if="iden
vue简单上传图片，压缩图片功能实现（js原生通用）
boy火巨的博客
06-29 4755
可以先看 只有上传图片的 js完整demohttps://blog.csdn.net/qq_42221334/article/details/84827369 vue 完整demohttps://blog.csdn.net/qq_42221334/article/details/93198417 参考上传图片 添加了canvas 方法压缩图片，判断图片宽度大于1000时 进行压缩 ...
vue3打包
极星(*^_^*)的博客
01-03 862
#在vue.config.js中添加一下代码可以对图片进行压缩处理 module.exports = { //关闭打包map文件 productionSourceMap: false, chainWebpack: (config) => { // vue-cli3打包时图片压缩处理：将图片大小限制设置为 10kb，低于10kb的图片全部被内联，高于10kb的图片会放在单独的i...
vue 图片指定大小压缩
cjxIt的博客
05-04 963
【代码】vue 图片指定大小压缩。
实习随笔-12、Vue打包压缩配置
Code P的博客
01-25 235
一、安装 npm i compression-webpack-plugin@5.0.1 npm i image-webpack-loader npm i webpack-bundle-analyzer -D 二、项目根目录下创建vue.config.js 1、gzip配置 项目 const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: conf
vue.config.js production
09-14
在生产环境中，你可以通过 `vue.config.js` 来配置一些优化选项、静态资源路径等。 以下是一些常用的配置选项： 1. `publicPath`: 设置静态资源文件（如 JS、CSS、图片等）的目录，默认是根路径 `'/'`。 2. `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值