[英]How to compress images with ImageMinimizerWebpackPlugin in Next.js (webpack 5)?
I want to compress images using this plugin, but I am faced with the problem that the build goes through, but the images are not compressed.我想使用这个插件压缩图像,但我面临构建通过但图像没有压缩的问题。
I'm new to webpack and don't understand what is wrong (maybe I need an exit point for compressed files as a folder?)我是 webpack 的新手,不明白出了什么问题(也许我需要一个将压缩文件作为文件夹的出口点?)
next.config.js next.config.js
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const nextConfig = {
future: {
webpack5: true
},
webpack: (config, options) => {
config.module.rules.push({
test: /\.(jpe?g|png|svg)$/i,
type: "asset",
})
config.plugins.push(new ImageMinimizerPlugin({
minimizerOptions: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
// Svgo configuration here https://github.com/svg/svgo#configuration
[
"svgo",
{
plugins:
{
name: "removeViewBox",
active: false,
},
},
],
],
},
})
)
return config
},
};
module.exports = nextConfig
Had the same issue and couldn't fix it with imagemin
.有同样的问题,无法用
imagemin
解决。 The only thing that worked is when I switched to using squoosh
as described in the Plugin docs .唯一有效的是当我切换到使用 插件文档中描述的
squoosh
。
If you want to use imagemin
, the only solution I can recommend at the moment is to use image-webpack-loader
instead of the new asset
feature of Webpack 5.如果你想使用
imagemin
,我目前唯一可以推荐的解决方案是使用image-webpack-loader
而不是 Webpack 5 的新asset
特性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.