针对vue3 压缩图片的处理

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