[英]How to compress images with ImageMinimizerWebpackPlugin in Next.js (webpack 5)?
我想使用这个插件压缩图像,但我面临构建通过但图像没有压缩的问题。
我是 webpack 的新手,不明白出了什么问题(也许我需要一个将压缩文件作为文件夹的出口点?)
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
有同样的问题,无法用imagemin
解决。 唯一有效的是当我切换到使用 插件文档中描述的squoosh
。
如果你想使用imagemin
,我目前唯一可以推荐的解决方案是使用image-webpack-loader
而不是 Webpack 5 的新asset
特性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.