注：本文需要读者掌握 Webpack 和 Node.js 知识
什么是 lqip-loader
lqip-loader 是一个 Webpack 加载器，用于生成图片的低质量图预览 (Low Quality Image Placeholders，简称 LQIP)。
使用 lqip-loader，能够在图片载入前，先渲染图片的基本信息和低质量预览，让用户看到有意义的内容，增加用户体验，提高网站性能。
安装 lqip-loader
--- ------- ----------- ----------
使用 lqip-loader
假设我们需要在 React 项目中使用 lqip-loader。
1. 配置 Webpack
在 Webpack 配置文件中增加以下 module.rules 选项：
-------------- - -
-- ---
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
-
--
-
------- --------------
-------- -
----- -----------------
-
-
-
-
-
-
-- ---
-此处 webpack 使用了 file-loader 将图片文件拷贝到输出目录，并使用 lqip-loader 生成 LQIP 预览图。
2. 使用 LQIP
在 React 组件中使用图片时，直接引用图片路径。
例如，在组件文件中引入图片：
------ ----- ---- ------- ------ ----- ---- ------------------ ------ ------- -------- ----- - ------ ---- ----------- --------- -- -
当图片载入时，将显示图片的基本信息和 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
--- ------- -------------- ------
重写 React 组件
例如，在上面的 Cat 组件中，使用 react-lazyload:
------ ----- ---- -------
------ -------- ---- ----------------
------ ----- ---- ------------------
------ ------- -------- ----- -
------ -
--------- -----
---- ----------- --------- --
-----------
-
-其中，once 属性指定只载入一次图片。
加载原图
默认情况下，LQIP 预览图作为 background-image 显示。我们需要将其替换为 img 标签，以便加载原图。
可以使用 lqip 包中的 lqip-cli 命令行工具为图片生成 data URI，并使用 react-lazyload 对图片懒加载。
在 Node.js 环境中，全局安装 lqip-cli 工具：
--- ------- -- --------
在命令行中执行以下命令：
-------- -- -------------- -- --- --
其中，-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