注：本文需要读者掌握 Webpack 和 Node.js 知识
什么是 lqip-loader
lqip-loader 是一个 Webpack 加载器，用于生成图片的低质量图预览 (Low Quality Image Placeholders，简称 LQIP)。
使用 lqip-loader，能够在图片载入前，先渲染图片的基本信息和低质量预览，让用户看到有意义的内容，增加用户体验，提高网站性能。
安装 lqip-loader
npm install lqip-loader --save-dev
使用 lqip-loader
假设我们需要在 React 项目中使用 lqip-loader。
1. 配置 Webpack
在 Webpack 配置文件中增加以下 module.rules 选项：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- ---------------------- ---- - - ------- -------------- -------- - ----- --------------- ----------- --------- - -- - ------- -------------- -------- - ----- ----------------- - - - - - - -- --- -展开代码
此处 webpack 使用了 file-loader 将图片文件拷贝到输出目录，并使用 lqip-loader 生成 LQIP 预览图。
2. 使用 LQIP
在 React 组件中使用图片时，直接引用图片路径。
例如，在组件文件中引入图片：
import React from 'react' import image from './images/cat.jpg' export default function Cat() { return <img src={image} alt="cat" /> }
当图片载入时，将显示图片的基本信息和 LQIP 预览图。
LQIP 预览图配置选项说明
可使用以下选项修改 LQIP 预览图配置：
quality：指定预览图的质量，范围从 1 到 100，通常使用 20 至 30，默认 20。width：指定预览图的宽度，默认为原图宽度的 1/10。blur：指定预览图的高斯模糊程度，通常使用 8 至 12，默认为 8。debug：设置为 true 时，预览图将显示文件大小和 Base64 编码。
LQIP 和原图的懒加载
使用 lqip-loader 后，图片会在载入到浏览器时，同时渲染出 LQIP 预览图和文件基本信息，这时再请求原图资源。
当图片资源较多时，同时请求原图资源会降低网页加载速度，不利于用户体验。
我们需要将 LQIP 和原图懒加载，使用户先看到 LQIP 预览图，再按需请求原图资源。
一种做法是使用 React 组件库 react-lazyload。
安装 react-lazyload
npm install react-lazyload --save
重写 React 组件
例如，在上面的 Cat 组件中，使用 react-lazyload:
-- -------------------- ---- ------- ------ ----- ---- ------- ------ -------- ---- ---------------- ------ ----- ---- ------------------ ------ ------- -------- ----- - ------ - --------- ----- ---- ----------- --------- -- ----------- - -展开代码
其中，once 属性指定只载入一次图片。
加载原图
默认情况下，LQIP 预览图作为 background-image 显示。我们需要将其替换为 img 标签，以便加载原图。
可以使用 lqip 包中的 lqip-cli 命令行工具为图片生成 data URI，并使用 react-lazyload 对图片懒加载。
在 Node.js 环境中，全局安装 lqip-cli 工具：
npm install -g lqip-cli
在命令行中执行以下命令：
lqip-cli -p images/cat.jpg -s 100 -v
其中，-p 指定图片路径，-s 指定输出尺寸，-v 显示 Base64 编码。
将输出的 Base64 编码复制到 img 标签的 src 属性中：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ -------- ---- ---------------- ----- ------------- - ----------------------------- -- -- -------- --- ------ -- ------ ------- -------- ----- - ------ - --------- ----- ---- ---------------- ------------------- --------------------------- --------- -- ----------- - -展开代码
使用 data-src 属性指定图片路径，将 src 属性设成 LQIP 预览图的 data URI。
当图片进入可视区域时，react-lazyload 才会将 data-src 的值传入 src 属性中，开始载入原图资源。
此时，压缩图片，或对图片进行缩放或裁剪，可显著提高网站性能和用户体验。
总结
lqip-loader 是一个实用的 Webpack 加载器，能够快速生成图片的 LQIP 预览图，提高网站性能和用户体验。
搭配 react-lazyload 组件库，可为图片懒加载原图，避免同时请求大量资源的网络拥堵。
希望本文能对您深入了解 lqip-loader 和懒加载等相关技术，提高前端开发经验和技能，产生一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77047
