:日出:::火箭:Nuxt优化图像
自动优化Nuxt.js项目(JPEG,PNG,SVG,WebP和GIF)中使用的图像.
以其他语言阅读: 联合国, (中文(简体) ), 西班牙语Name
特征
图像大小往往会缩小到60%,但这不是唯一的问题 @aceforth/nuxt-optimized-images 是否为:
- 缩小图像大小 在构建过程中优化图像.
- 通过提供提高加载速度 渐进图像 (用于支持它的格式).
- JPEG/ PNG 图像可以是 转换为
WebP苍蝇上 为了更小的尺寸. - 可以吗 调整大小 图像或生成 低质量图像占位符 (单位:千美元)齐普)和取出主导者 颜色 说吧.
- 提供 查询段落 用于文件特定处理/设置.
- 并支持已包含在 Nuxt.js 中的这些特性 :
- 内容散列 到文件名时,图像可以在CDN级别和浏览器中缓存很长时间.
- 内嵌小图像 以保存 HTTP 请求和额外的圆通.
- 多个图像上不变的相同 URL 构建长时间缓存 .
安装
: 警告: node >= 10 财务报告和审定财务报表 nuxt >= 2 需要这样做.
npm install --save-dev @aceforth/nuxt-optimized-images
或者说
yarn add --dev @aceforth/nuxt-optimized-images
添加 @aceforth/nuxt-optimized-images 改为 buildModules nuxt.config.js 的一节:
: 警告: 如果您正在使用 Nuxt < 2.9.0,使用时 modules 换句话说.
{
buildModules: [
'@aceforth/nuxt-optimized-images',
],
optimizedImages: {
optimizeImages: true
}
}
见 配置 用于所有可用选项的段落.
:警告:图像不会被优化出盒子. 除此模块外, 您还需要安装您真正需要的优化软件包 。 这不强迫你下载你甚至不用的大优化库. 请检查所有表格 可选优化软件包。 。 。 .
优化软件包
除此模块外,您还必须在工程中安装您所需的优化软件包. 接下来, @aceforth/nuxt-optimized-images 检测所有支持的软件包并使用它们.
所以只需要用 npm 安装这些软件包,之后就不需要额外的步骤了.
以下优化软件包可供使用和支持:
| 优化软件包 | 说明 | 项目链接 |
|---|---|---|
imagemin-mozjpeg | 优化 JPEG 图像 | 链接 |
imagemin-pngquant | 优化 PNG 图像 | 链接 |
imagemin-optipng | 优化 PNG 图像的替代品 | 链接 |
imagemin-gifsicle | 优化 GIF 图像 | 链接 |
imagemin-svgo | 优化 SVG 图像和图标 | 链接 |
webp-loader | 优化WebP图像并可在苍蝇上将JPEG/PNG图像转换为WebP(WebP 资源查询(中文(简体) ) | 链接 |
lqip-loader | 生成低质量图像占位符,并可以提取图像的主要颜色(lqip 资源查询(中文(简体) ) | 链接 |
responsive-loader | 可以在苍蝇上调整图像大小并创建其多个版本 srcSet。 。 。 . 重要: 您需要额外安装 jimp (节点执行较慢)或 sharp (二进制,更快) | 链接 |
sqip-loader | 装入图像并导出小的 SQIP 预览为 image/svg+xml URL 编码数据 | 链接 |
示例:如果您的项目中有 JPG 、 PNG 和 SVG 图像, 您需要运行
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo
# or
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo
要安装 全部 可选软件包, 运行 :
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp
# or
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp
:警告:请注意,默认情况下,图像只为 生产建设,而不是开发建设然而,这可以随着 optimizeImagesInDev 配置。 。 。 .
文档和支持
- 如果您想要更多关于如何配置和使用此工程的细节, 则 完整文档 备查 https://marquez.co/docs/nuxt-优化-images/ 页面存档备份,存于互联网档案馆。 。 。 .
- 为: 错误报告 或者说 特性请求,使用 问题部分。 。 。 .
- 为: 问 题时,您也可以使用 讨论部分。 。 。 .
- 您也许也想 跟我来 在推特上进行。 。 。 .
专业支助
这个项目由我赞助, 一个完整的堆栈开发者。 如果您的项目需要专业援助,请联系我 https://marquez.co (英语)。 。 。 .
行为守则
参加该项目的每个人都应同意遵守 行为守则。 。 。 .
许可证
代码根据 MIT 许可证。 。 。 .