美文网首页
针对vue3 压缩图片的处理

针对vue3 压缩图片的处理

作者: JackyLF | 来源:发表于2021-09-22 16:58 被阅读0次

安装image-webpack-loader插件

1、如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载掉,然后用 cnpm 安装

yarn remove image-webpack-loader // npm uninstall image-webpack-loader

2、使用 cnpm 安装 image-webpack-loader 会发现很快就安装好了

cnpm install --save-dev image-webpack-loader

注:如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载掉用 cnpm 安装

在vue.config.js当中进行配置

   chainWebpack: config => {
    const imagesRule = config.module.rule('images')
    imagesRule
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
            bypassOnDebug: true
        })
        .end()
}

然后进行打包,图片的压缩最高可达60%以上。

如果在nuxt项目直接下载 image-webpack-loader即可,不用进行配置,也能达到效果。

相关文章

  • 针对vue3 压缩图片的处理

    安装image-webpack-loader插件 1、如果先前尝试使用 yarn 或 npm 安装过,一定要先卸载...

  • tmall 前端11.11

    体积优化 全局图片开关管控,针对商品、店铺、页头、入口图等图片通过开关全局系数裁剪压缩处理,降低页面图片整体体积;...

  • iOS 图片压缩方法

    iOS 图片压缩方法 更多图片处理方法见图片组件 BBWebImage iOS 图片压缩方法 两种图片压缩方法 两...

  • 图片压缩处理

    @interface UIImage (fixOrientation)- (UIImage *)fixOrient...

  • Java图片压缩处理

    网页中某些图片大的时候,图片会加载慢,这时候需要对图片进行压缩处理,Java有对图片进行压缩处理的方法。 整体思路...

  • android 图片质量压缩

    // 对于图片压缩,主要针对大图片,这里的压缩是采取先解码尺寸,然后计算压缩比,整数倍压缩方式,所以是近似结果; ...

  • imageView的处理

    图片的处理参见谈谈 iOS 中图片的解压缩

  • UIIMageView高级处理

    一、图片压缩 1.1 直接格式转换压缩 1.2 Context重新绘制 二、图片处理 2.1 图片像素上修改 2....

  • 关于安卓图片压缩处理

    如题,本文主要介绍图片压缩方法的使用(原生)主要处理逻辑,就是对bitmap的处理,例如质量压缩,和宽高剪裁压缩。...

  • 【Android开发基础系列】图片专题

    1 图片编辑处理 1.1 图片裁切 转载自:bitmap的六种压缩方式,Android图片压缩 http://bl...

网友评论

      本文标题:针对vue3 压缩图片的处理

      本文链接:https://www.haomeiwen.com/subject/hjkggltx.html