nuxt框架下压缩图片使用@aceforth/nuxt-optimized-images插件


图像大小通常可以减少多达60％，但这并不是唯一的事情@aceforth/nuxt-optimized-images：

  • 通过在构建过程中优化图像来减小图像大小。
  • 通过提供渐进式图像（用于支持它的格式）来提高加载速度。
  • 内联小图像以保存HTTP请求和其他往返。
  • 在文件名中添加内容哈希，以便可以长时间在CDN级别和浏览器中缓存图像（这是Nuxt.js的默认行为）。
  • 多个构建中的相同图像URL可以长时间缓存。
  • 提供查询参数，以进行特定于文件的处理/设置。
  • JPEG / PNG图像可以即时转换WebP为更小的尺寸。
  • 可以调整图像大小或生成低质量的图像占位符（lqip）并提取其主要颜色。

我所使用的版本是@nuxt2.14.0

首先下载插件@aceforth/nuxt-optimized-images

1
2
3
4
npm install --save-dev  @aceforth/nuxt-optimized-images
or

yarn add --dev @aceforth/nuxt-optimized-images

然后在nuxt.config.js文件当中进行配置

1
2
3
4
5
6
7
8
9
{
  buildModules: [
    '@aceforth/nuxt-optimized-images',
  ],
   /*这个配置不是必须的*/
  optimizedImages: {
    optimizeImages: true
  }
}

@bazzite/nuxt-optimized-images