Hello，大家好啊！我是聪明的墨菲特 (o.O)? ！今天和大家分享在使用webpac高级部分——图片压缩。
引用了大量本地图片进行页面渲染的项目，项目内图片不做压缩处理打包后项目体积会过大！（注意：如果项目中图片地址引用的是外部地址，就可不做压缩处理）
话不多说咱们直接开启操作步骤！
一、下载安装包
npm i image-minimizer-webpack-plugin imagemin -D
剩下安装包有两种模式，无损压缩和有损压缩。
1.无损压缩（推荐）：压缩后图片体积稍大一点，但保持了完整
npm install --ignore-scripts imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
2.有损压缩（不推荐）： 压缩后图片体积更小一点，但不完整
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
二、配置
在配置文件webpack.prod.js内添加如下代码
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); //本地图片压缩
主要图片压缩配置代码从第三点开始
optimization: {//放置压缩的操作
minimizer: [
//1. css代码压缩（原生格式压缩为一行，注意：默认生产模式已经开启了html压缩、js压缩，不需要配置）
new CssMinimizerPlugin(),
//2. js压缩
new TerserWebpackPlugin({
parallel: threads, //开启多进程和设置进程数量
}),
//3. 压缩图片
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
[
"svgo",
{
plugins: [
"preset-default",
"prefixIds",
{
name: "sortAttrs",
params: {
xmlnsOrder: "alphabetical",
},
},
],
},
],
],
},
},
}),
],
},
配置完成后尝试打包，你会发现会有以下喵的报错！别急！咱们还有后续配置进行解决~
三、报错解决
1. 下载两个exe文件：
jpegtran.exe下载地址： http://jpegclub.org/jpegtran/
optipng.exe 下载地址：https://optipng.sourceforge.net/
2. node_modules 内添加两个exe文件
jpegtran.exe复制到 node_modules\jpegtran-bin\vendor 下
optipng.exe复制到 node_modules\optipng-bin\vendor 下
添加完后就可以 npm run build 打包咯，打包完成后对比原图片你会发现“雀石小了O.o?”。
好文推荐
您阅读本篇文章共花了：
发表评论