@aceforth/nuxt-optimized-images 中文文档教程

Question

:sunrise: :rocket: Nuxt Optimized Images

自动优化 Nuxt.js 项目中使用的图像（JPEG、PNG、SVG、WebP 和 GIF）。

此模块的灵感来自 Cyril Wanner 在 下一个优化的图像。

阅读其他语言版本：英语< /a>, 西班牙语

Features

图片大小通常可以减少 60%，但这不是 @aceforth/nuxt-optimized-images 做的唯一事情

• Reduces image size by optimizing images during build.
• Improves loading speed by providing progressive images (for formats that support it).
• JPEG/PNG images can be converted to WebP on the fly for an even smaller size.
• Can resize images or generate low-quality image placeholders (lqip) and extract the dominant colors of it.
• Provides query params for file-specific handling/settings.
• And supports these features already included in Nuxt.js:
• Content hash to the file name so images can get cached on CDN level and in the browser for a long time.
• Inlined small images to save HTTP requests and additional roundtrips.
• Same URLs for unchanged images over multiple builds for long time caching.

Installation

：:warning: node >= 10 和 nuxt >= 2 是必需的。

```狂欢 npm 安装 --save-dev @aceforth/nuxt-optimized-images

or

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

Add `@aceforth/nuxt-optimized-images` to `buildModules` section of nuxt.config.js:

:warning: If you are using Nuxt `< 2.9.0`, use `modules` instead. 

js { 构建模块：[ '@aceforth/nuxt-optimized-images', ],

优化图片: { 优化图片：真 } }

See the [configuration][docs-configuration] section for all available options.


:warning: Images won't get optimized out of the box. You have to install the optimization packages you really need in addition to this module. This doesn't force you to download big optimization libraries you don't even use. Please check out the table of all [optional optimization packages](#optimization-packages).

## Optimization Packages

You have to install the optimization packages you need in your project in addition to this module. Then, `@aceforth/nuxt-optimized-images` detects all the supported packages and uses them.

**So you only have to install these packages with npm, there is no additional step needed after that.**

The following optimization packages are available and supported:

| Optimization Package | Description                                                                                                                                                                                             | Project Link              |
|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| `imagemin-mozjpeg`   | Optimizes JPEG images                                                                                                                                                                                   | [Link][imagemin-mozjpeg]  |
| `imagemin-pngquant`  | Optimizes PNG images                                                                                                                                                                                    | [Link][imagemin-pngquant] |
| `imagemin-optipng`   | Alternative for optimizing PNG images                                                                                                                                                                   | [Link][imagemin-optipng]  |
| `imagemin-gifsicle`  | Optimizes GIF images                                                                                                                                                                                    | [Link][imagemin-gifsicle] |
| `imagemin-svgo`      | Optimizes SVG images and icons                                                                                                                                                                          | [Link][imagemin-svgo]     |
| `webp-loader`        | Optimizes WebP images and can convert JPEG/PNG images to WebP on the fly ([WebP resource query](./docs/usage.md#webp))                                                                                       | [Link][webp-loader]       |
| `lqip-loader`        | Generates low quality image placeholders and can extract the dominant colors of an image ([lqip resource query](./docs/usage.md#lqip))                                                                       | [Link][lqip-loader]       |
| `responsive-loader`  | Can resize images on the fly and create multiple versions of it for a `srcSet`. **Important**: You need to additionally install either `jimp` (node implementation, slower) or `sharp` (binary, faster) | [Link][responsive-loader] |
| `sqip-loader`  | Loads images and exports tiny SQIP previews as `image/svg+xml` URL-encoded data | [Link][sqip-loader] |

Example: If you have JPG, PNG, and SVG images in your project, you would then need to run

嘘 npm 安装 --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

or

纱线添加 --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

To install **all** optional packages, run:

sh npm 安装 --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 ```

:warning: 请注意，默认情况下，图像仅针对生产构建进行优化，而非开发构建。 但是，这可以通过 optimizeImagesInDev 配置。

Documentation & Support

• If you want extra details of how to configure and use this project, the full documentation is available at https://marquez.co/docs/nuxt-optimized-images/.
• For Bug reports or Feature requests, use the Issues section.
• For questions, you can also use the Discussions section.
• You may also want to follow me on Twitter.

Professional Support

这个项目是由我发起的，我是一名全栈开发人员。 如果您的项目需要专业协助，请通过 https:/ /marquez.co。

Code of Conduct

参与此项目的每个人都应同意遵守行为准则。

License

代码根据 MIT 许可 发布。