前言
在移动化的今天，PWA（Progressive Web Apps）已经成为了越来越多公司和开发者关注的方向。PWA 不仅能够提供和原生应用一样的用户体验，而且还能够带来更好的性能和用户留存率等优势。其中，图片的优化是 PWA 优化中的重要环节。本文将介绍一款用于解决 PWA 中图片优化问题的 npm 包——pwa-srcset-loader。
什么是 pwa-srcset-loader？
pwa-srcset-loader 是一款基于 Webpack 的静态资源优化工具，主要用于针对 PWA 开发中高清屏幕图片的处理。通过 pwa-srcset-loader 处理后，将使得高清屏幕设备展示的图片具备更好的显示效果，而在传统设备上依然能够保持原来图片的分辨率。pwa-srcset-loader 采用了 HTML5 中<img>标签中的属性srcset 的方式，根据设备的视网膜屏幕和普屏幕判断应该展示的图片。
pwa-srcset-loader 的安装
要使用 pwa-srcset-loader，需要先安装 Webpack。
npm install webpack --save-dev
然后再安装 pwa-srcset-loader:
npm install pwa-srcset-loader --save-dev
pwa-srcset-loader 的使用方法
配置 Webpack
在 Webpack 配置文件中，需要配置 pwa-srcset-loader 插件的使用，并且需要针对开发环境和生产环境进行不同的处理。在 loader 配置中加入以下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- -----------------------
---- -
-
------- --------------------
-------- -
----------- ---------------------
------ --
-------- --
-------- ---
------ ----- ---- ------
--
--
-
------- --------------
-------- -
----- ---------
------- ------
----- ----------------------
--
--
--
-
-
-pwa-srcset-loader 可以透传 HTML5 中<img>标签中的属性srcset, 只要通过options.notProcess排除不需要处理，其他的就会自动透传。
使用示例
接下来，我们建立一个测试用例（test.html），这里只考虑 img 这个标签用的例子，picture 标签的使用方法请参考文档。
<img src="images/test.jpg" />
然后，我们将上面的文件夹压缩后，放在我们 Webpack 配置文件的目录下，比如说我们压缩后的文件夹为example.zip，则我们需要在配置文件中指定该文件夹的位置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
------ ------------------ ---------
--------- -------------- -- -- ---- -------
---
--- --------------------
-------- ----------------
------- ----------------------- -------
---
--
------- -
------ -
-
----- -----------------------
---- -
-
------- --------------------
-------- -
----------- ---------------------
------ --
-------- --
-------- ---
------ ----- ---- ------
--
--
-
------- --------------
-------- -
----- ---------
------- ------
----- ----------------------
--
--
--
--
--
--
--最后，我们执行命令进行打包：
webpack --config webpack.config.js
这里安装了 html-webpack-plugin 和 unzip-webpack-plugin，并设置了配置。
当我们打开 dist 目录下生成的 index.html 时，可以看到 pwa-srcset-loader 已经将图片压缩分别为 480, 960, 1440 三种大小，可以在浏览器 DevTools 中进行查看。
pwa-srcset-loader 的参数
pwa-srcset-loader 提供了一些参数来控制工作行为：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| ratio | Number | 2 | 屏幕画质倍数值，一般为 1 或 2（Retina 屏幕） |
| sizes | Array | [480] | 屏幕 width 值， 例如sizes=[480, 960] 则生成像素为 480 和 960 的两份缩略图 |
| padding | Number | 8 | 图片缩略图的内边距，需要根据头像/商品的具体情况适当修改 |
| quality | Number | 75 | 图片的压缩质量，建议设置为 60-80 之间，取决于图片的具体用途 |
| notProcess | RegExp | null | 不处理的图片正则，比如您可能不想处理/static 下的原图 |
| optimizationOptions | Object | {} | 传递给 sharp 模块的参数 |
总结
通过上述教程，你已经了解了如何在 Webpack 中使用 pwa-srcset-loader 进行图片优化。在 PWA 开发中，图片优化已经成为了一个非常重要的环节，也是提升用户体验和性能的重要手段之一。通过使用 pwa-srcset-loader，可以有效地提高图片显示质量和加载速度，是 PWA 开发过程中不可或缺的工具之一。
示例代码和更多细节在 GitHub 主页 pwa-srcset-loader 有详细的说明。
参考： pwa-srcset-loader Docs | Github
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60868