什么是 PWA？
PWA（Progressive Web App）是一种在 Web 上构建应用程序的方法，它几乎与原生应用程序相同，同时也具有 Web 应用程序的优点：可访问性、可更新性和跨平台性。 PWA 将 Web 技术应用于构建应用程序，因此有时被称为 Web 应用程序。
为什么要使用 PWA？
PWA 组合了应用程序与 Web 的优点，还有很多好处，例如：
快速 - 由于使用了缓存和指定的预先加载，PWA 应用程序比传统 Web 应用程序加载更快，访问更快。
离线支持 - PWA 应用程序可以在离线状态下运行并提供基本的功能，比如向用户提示断开网络连接。
简单 - PWA 应用程序会通过一个唯一的 URL 进行访问，就像 Web 应用程序一样，因此不需要通过应用商店下载安装。
类似原生应用程序体验 - PWA 应用程序提供了和原生应用程序一样流畅的交互和界面体验，但不需要应用商店发布。
PWA 中的资源优化
PWA 中的资源优化可以提高 Web 应用程序的加载速度和交互速度。 像库、CSS、JS、图像等这些资源，如果加载慢，通常就是用户体验不佳的罪魁祸首。 因此，要想构建出更快的 PWA 应用程序，资源优化至关重要。
指南
以下是一些 PWA 资源优化的指南：
加载所需资源 - 最简单的优化是只加载所需资源。 根据需要加载和条件加载库和脚本，如懒加载或按需加载图像。
压缩和优化图像 - 使用可重复利用的格式（比如 WebP 格式） 和工具进行压缩，以减少图像文件大小和提高页面载入速度。所有用到的图像应该瘦身。这可以使用 Sharp 或 Squoosh 这样的优化工具来达到。
使用 Webpack 和 Babel 插件 - Webpack 和 Babel 图像处理插件可以打包压缩 CSS 和 JS 文件，并使构建过程自动化。 Webpack 可以分离代码和提供 HMR（热模块替换），同时使用 Babel 插件可以在大多数浏览器中使用最新的 ES6+ 语言特性。
示例代码
下面是一段使用 Webpack 和 Babel 插件的 webpack.config.js 文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- --------------------- - --------------------------------------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
----- --------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ---------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ----------
---- -
----------------------------
-------------
-------------
-
--
-
----- ---------------------
---- -
-
------- --------------
-------- -
----- ------------------------
----------- ----------
----------- ------------
-
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- --
--
-------- -
-------- -----
--
--------- -
-------- --------
------ -
--
--------- -
----------- ------
--
----- -
-------- --
-
-
-
-
-
-
--
-------- -------------
-------- -
--- -----------------------------
--- ------------------- --------- ------------ ---
--- ----------------------
--------- ---------------------
---
--- -------------------------
-------------------- -
---- -
------- ------
----------- ----
-
-
---
--- ----------------------- ---------- ----- ---
--- -----------------------
-
--结论
在开发 PWA 应用程序时，优化资源非常重要，因为会影响用户体验。在本指南中，我们提供了一些优化指南和示例代码，以帮助您将您的 PWA 应用程序提高到最佳状态。使用 Webpack 和 Babel 插件，结合指南中的最佳实践，您将能够构建出更快、更好的 PWA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67074a79d91dce0dc866727a