# @aceforth/nuxt-optimized-images 中文文档 规范地址：https://npmcn.com/package/%40aceforth/nuxt-optimized-images/ 版本：1\.4\.0 npm 元数据更新时间：2022-04-04T11:10:25.056Z 中文译文更新时间：2026-11-05T23:18:25.278Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40aceforth/nuxt-optimized-images 原文对照：https://npmcn.com/package/%40aceforth/nuxt-optimized-images/?lang=original 项目主页：https://marquez.co/docs/nuxt-optimized-images/?utm_source=npm&utm_medium=readme&utm_campaign=nuxt-optimized-images 源码仓库：https://github.com/juliomrqz/nuxt-optimized-images ## 关键信息（来自 npm 元数据） - 包体积（解压后）：45.1 kB，28 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：5 个 - 首次发布：2020-04-12T17:11:48.044Z - 最新版本发布：2021-01-02T13:52:17.346Z - 近 30 天下载量：9721（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：6（近 12 个月 0 个） ## 中文简介 自动优化Nuxt.js项目(jpeg,png,svg,webp和gif)中使用的图像. ## 安装 ```sh npm install @aceforth/nuxt-optimized-images ``` 也可以使用：`pnpm add @aceforth/nuxt-optimized-images`、`yarn add @aceforth/nuxt-optimized-images`、`bun add @aceforth/nuxt-optimized-images` ## README [![Codacy Badge](https://api.codacy.com/project/badge/Grade/db0e010ec71b462b8732b926e5799cc6)](https://www.codacy.com/app/juliomrqz/nuxt-optimized-images?utm_source=github.com&utm_medium=referral&utm_content=juliomrqz/nuxt-optimized-images&utm_campaign=Badge_Grade) [![Travis](https://img.shields.io/travis/juliomrqz/nuxt-optimized-images.svg)](https://travis-ci.org/juliomrqz/nuxt-optimized-images) [![David](https://img.shields.io/david/peer/juliomrqz/nuxt-optimized-images.svg)](https://david-dm.org/juliomrqz/nuxt-optimized-images?type=peer) [![David](https://img.shields.io/david/dev/juliomrqz/nuxt-optimized-images.svg)](https://david-dm.org/juliomrqz/nuxt-optimized-images?type=dev) [![version](https://img.shields.io/npm/v/@aceforth/nuxt-optimized-images.svg)](https://www.npmjs.com/package/@aceforth/nuxt-optimized-images) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/juliomrqz/nuxt-optimized-images/develop/LICENSE) # :日出:::火箭:Nuxt优化图像 自动优化Nuxt.js项目(JPEG,PNG,SVG,WebP和GIF)中使用的图像. > 本单元的灵感来自 [西里尔·万纳](https://github.com/cyrilwanner) 内 [未来最佳形象](https://github.com/cyrilwanner/next-optimized-images)。 。 。 . _以其他语言阅读: [联合国](https://marquez.co/docs/nuxt-optimized-images/?utm_source=github&utm_medium=readme&utm_campaign=nuxt-optimized-images), (中文(简体) ), [西班牙语Name](https://marquez.co/es/docs/nuxt-optimized-images/?utm_source=github&utm_medium=readme&utm_campaign=nuxt-optimized-images)_ ## 特征 图像大小往往会缩小到60%,但这不是唯一的问题 `@aceforth/nuxt-optimized-images` 是否为: - **缩小图像大小** 在构建过程中优化图像. - 通过提供提高加载速度 **渐进图像** (用于支持它的格式). - JPEG/ PNG 图像可以是 **转换为 [`WebP` 苍蝇上](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#webp)** 为了更小的尺寸. - 可以吗 **[调整大小](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#resize)** 图像或生成 **低质量图像占位符** (单位:千美元)[齐普](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#lqip))和取出主导者 [颜色](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#lqip-colors) 说吧. - 提供 **[查询段落](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#query-params)** 用于文件特定处理/设置. - 并支持已包含在 Nuxt.js 中的这些特性 : - **内容散列** 到文件名时,图像可以在CDN级别和浏览器中缓存很长时间. - **内嵌小图像** 以保存 HTTP 请求和额外的圆通. - 多个图像上不变的相同 URL 构建长时间缓存 . ## 安装 : 警告: `node >= 10` 财务报告和审定财务报表 `nuxt >= 2` 需要这样做. ```bash npm install --save-dev @aceforth/nuxt-optimized-images ``` 或者说 ```bash yarn add --dev @aceforth/nuxt-optimized-images ``` 添加 `@aceforth/nuxt-optimized-images` 改为 `buildModules` nuxt.config.js 的一节: : 警告: 如果您正在使用 Nuxt `< 2.9.0`,使用时 `modules` 换句话说. ```js { buildModules: [ '@aceforth/nuxt-optimized-images', ], optimizedImages: { optimizeImages: true } } ``` 见 [配置](https://marquez.co/docs/nuxt-optimized-images/configuration/?utm_source=github&utm_medium=readme&utm_campaign=nuxt-optimized-images) 用于所有可用选项的段落. :警告:图像不会被优化出盒子. 除此模块外, 您还需要安装您真正需要的优化软件包 。 这不强迫你下载你甚至不用的大优化库. 请检查所有表格 [可选优化软件包](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/#readme-optimization-packages)。 。 。 . ## 优化软件包 除此模块外,您还必须在工程中安装您所需的优化软件包. 接下来, `@aceforth/nuxt-optimized-images` 检测所有支持的软件包并使用它们. **所以只需要用 npm 安装这些软件包,之后就不需要额外的步骤了.** 以下优化软件包可供使用和支持: | 优化软件包 | 说明 | 项目链接 | | --- | --- | --- | | `imagemin-mozjpeg` | 优化 JPEG 图像 | [链接](https://www.npmjs.com/package/imagemin-mozjpeg) | | `imagemin-pngquant` | 优化 PNG 图像 | [链接](https://www.npmjs.com/package/imagemin-pngquant) | | `imagemin-optipng` | 优化 PNG 图像的替代品 | [链接](https://www.npmjs.com/package/imagemin-optipng) | | `imagemin-gifsicle` | 优化 GIF 图像 | [链接](https://www.npmjs.com/package/imagemin-gifsicle) | | `imagemin-svgo` | 优化 SVG 图像和图标 | [链接](https://www.npmjs.com/package/imagemin-svgo) | | `webp-loader` | 优化WebP图像并可在苍蝇上将JPEG/PNG图像转换为WebP([WebP 资源查询](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#webp)(中文(简体) ) | [链接](https://www.npmjs.com/package/webp-loader) | | `lqip-loader` | 生成低质量图像占位符,并可以提取图像的主要颜色([lqip 资源查询](https://npmcn.com/package/%40aceforth/nuxt-optimized-images/docs/usage.md#lqip)(中文(简体) ) | [链接](https://www.npmjs.com/package/lqip-loader) | | `responsive-loader` | 可以在苍蝇上调整图像大小并创建其多个版本 `srcSet`。 。 。 . **重要**: 您需要额外安装 `jimp` (节点执行较慢)或 `sharp` (二进制,更快) | [链接](https://www.npmjs.com/package/responsive-loader) | | `sqip-loader` | 装入图像并导出小的 SQIP 预览为 `image/svg+xml` URL 编码数据 | [链接](https://github.com/EmilTholin/sqip-loader) | 示例:如果您的项目中有 JPG 、 PNG 和 SVG 图像, 您需要运行 ```sh npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo # or yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo ``` 要安装 **全部** 可选软件包, 运行 : ```sh 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-optimized-images/configuration/?utm_source=github&utm_medium=readme&utm_campaign=nuxt-optimized-images#optimizeimagesindev)。 。 。 . ## 文档和支持 - 如果您想要更多关于如何配置和使用此工程的细节, 则 **完整文档** 备查 [https://marquez.co/docs/nuxt-优化-images/ 页面存档备份,存于互联网档案馆](https://marquez.co/docs/nuxt-optimized-images/?utm_source=github&utm_medium=readme&utm_campaign=nuxt-optimized-images)。 。 。 . - 为: **错误报告** 或者说 **特性请求**,使用 [问题部分](https://github.com/juliomrqz/nuxt-optimized-images/issues)。 。 。 . - 为: **问 题**时,您也可以使用 [讨论部分](https://github.com/juliomrqz/nuxt-optimized-images/discussions)。 。 。 . - 您也许也想 **跟我来** [在推特上进行](https://twitter.com/juliomrqz)。 。 。 . ## 专业支助 这个项目由我赞助, 一个完整的堆栈开发者。 如果您的项目需要专业援助,请联系我 [https://marquez.co (英语)](https://marquez.co/?utm_source=github&utm_medium=readme&utm_campaign=nuxt-optimized-images)。 。 。 . ## 行为守则 参加该项目的每个人都应同意遵守 [行为守则](https://www.contributor-covenant.org/version/2/0/code_of_conduct/)。 。 。 . ## 许可证 代码根据 [MIT 许可证](https://github.com/juliomrqz/nuxt-optimized-images/blob/develop/LICENSE)。 。 。 . ![](https://ga-beacon.appspot.com/UA-65885578-17/juliomrqz/nuxt-optimized-images?pixel) ## 常见问题 ### @aceforth/nuxt-optimized-images 是什么？ 自动优化Nuxt\.js项目\(jpeg,png,svg,webp和gif\)中使用的图像\. ### 如何安装 @aceforth/nuxt-optimized-images？ 在项目目录运行 npm install @aceforth/nuxt-optimized-images，或使用 pnpm add / yarn add / bun add。 ### @aceforth/nuxt-optimized-images 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aceforth\_\_nuxt-optimized-images 是否存在。 ### @aceforth/nuxt-optimized-images 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @aceforth/nuxt-optimized-images 可以商用吗？ @aceforth/nuxt-optimized-images 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @aceforth/nuxt-optimized-images 的下载量有多少？ 根据 npm 官方下载统计，@aceforth/nuxt-optimized-images 在 2026/10/05 – 2026/11/03 这 30 天内被下载 9,721 次，日均约 324 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @aceforth/nuxt-optimized-images 还在维护吗？ 最新版本 1\.4\.0 发布于 2021/01/02（5 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/04/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。