文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue-cli3打包时图片压缩处理方式

2024-04-02 19:55

关注

vue-cli3打包时图片压缩

当我们在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。

在其编译过程中,所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

在其内部,vue 通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的图片路径,再用 url-loader 将小于 4kb 的图片内联,以减少 HTTP 请求的数量。

我们可以通过 chainWebpack 调整图片的大小限制。

例如

我们将图片大小限制设置为 6kb,低于6kb的图片全部被内联,高于6kb的图片会放在单独的img文件夹中。

代码如下

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    const imagesRule = config.module.rule("images")
    imagesRule
      .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 6144 }))
  }
}

vue-cli3压缩图片配置

安装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即可,不用进行配置,也能达到效果。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯