针对vue3 压缩图片的处理

2021-09-22  本文已影响0人  JackyLF

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

上一篇下一篇

猜你喜欢

热点阅读