vue-cli3打包时图片压缩处理方式
时间：2022-10-22 13:57:03|栏目：vue|点击： 次
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即可，不用进行配置，也能达到效果。
