乘风原创程序

  • vue-cli3打包时图片压缩处理方式
  • 2022/3/28 15:18:32
  • 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即可,不用进行配置,也能达到效果。

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