我正在尝试使用下一个 js 9.3.6设置next-optimized-images 2.6.2，在此之后我想做“下一个构建”和“下一个导出”并生成一个静态站点。在此之后，我希望与亚马逊 S3 一起托管它。我希望 next-optimized-images 在开发时也优化图像。
我的next.config.js文件看起来像
const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const path = require('path')
module.exports = withPlugins(
[
[withSass],
[
optimizedImages,
{
optimizeImagesInDev: true
}
],
[withCSS]
],
{
webpack (config, options) {
config.resolve.modules.push(path.resolve('./'))
return config
}
}
)
我还安装了以下优化包
"image-trace-loader": "^1.0.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"webp-loader": "^0.6.0",
我的代码中有 webp 和 png 图像，我以这种方式导入
import infoImage1 from 'assets/img/pages/covid/infoImage1.png' …