PWA 中分离静态资源的优化实践
在现代 Web 应用中，PWA（Progressive Web Apps）成为了 Web 技术发展的重要方向之一。PWA 借助 Web 技术实现了类似 Native 应用的交互体验，同时保留了 Web 应用的访问性、可搜索性、可分享性等特点，全面提升了 Web 应用的用户体验。
然而，PWA 应用的性能优化一直是前端开发者需要持续关注的领域。拥有一个高效、稳定的 PWA 应用需要多个方面的优化，其中一个重要的方面就是静态资源的分离。
静态资源的分离是指将应用中的不同资源分别打包、加载。这样做的好处在于：
- 部署时可以根据不同资源的压缩优化策略进行针对性处理，以减少资源的大小和加载时间。
- 不同资源在运行时的加载时机不同，通过分离可以更好地控制资源的加载时机，以提升应用的性能。
- 加速开发时的热更新效率。
在 PWA 应用中，通常需要分别打包应用 code （业务代码）、vendor code（如 Vue、React 等框架和工具库）、runtime code（如 webpack runtime）、CSS、image 等静态资源。这里以 Vue CLI 创建的 PWA 应用为例，进行具体的实践。
在 Vue CLI 中分离静态资源
Vue CLI 是一个 Vue.js 开发的标准工具，它帮助开发者搭建、配置、打包 Vue.js 应用。在 Vue CLI 4.x 版本中，通过 vue.config.js 配置文件可以方便地进行静态资源分离。
- 安装和配置 CompressionWebpackPlugin（gzip 压缩）
安装 CompressionWebpackPlugin 库：
npm install compression-webpack-plugin --save-dev
在 vue.config.js 配置文件中引用该库，并设置相关配置：
-- -------------------- ---- ------- ----- ----------------- - ------------------------------------- -------------- - - ----------------- - -------- - --- ------------------- --------- ------------------- ---------- ------- ----- -------------- ---------- ------ --------- --- -- - - -展开代码
这里的配置将对 JS 和 CSS 文件进行 gzip 压缩，仅当文件大小超过 10KB 且压缩后文件大小与原文件大小的比率达到 0.8 时才会进行压缩。压缩后的文件名以 .gz 结尾。CompressonWebpackPlugin 也支持其他压缩方式，例如 Brotli。
- 安装和配置 SplitChunks 插件（vendor 和 runtime 代码分离）
SplitChunks 是 Webpack 提供的插件，主要用于代码分离。在 Vue CLI 中，可以通过具体的配置实现 vendor 和 runtime 代码的分离。
在 vue.config.js 配置文件中，添加 optimization 配置：
-- -------------------- ---- ------- -------------- - - ----------------- - ------------- - ------------ - ------- ------ ------------------- --------- -------- ------ ------------ - ------- - ----- ------------------------- ------------ - ----- ----------- - --------------------------------------------------------------- ------ ------------------------------- ----- - -- -------- - ----- ---------------- ----- -------------------------- -- --- --------- ---- ----- ---------- -- -- ------- ------ ------ --------- -- ------------------- ---- - - - - - -展开代码
在这里，我们主要关注了 cacheGroups 里应用的规则设置。其中，通过 test: /[\/]node_modules[\/]/ 来制定 vendor 的代码文件。同时，为了将 vendor 分成不同模块，使用 name 指定了生成的文件名。
可以通过运行 yarn build 后查看控制台输出，确认相应的代码文件已经被拆分出来。
- 安装和配置 CopyWebpackPlugin（资源文件复制）
CopyWebpackPlugin 是 Webpack 提供的是一个拷贝文件的插件，在 Vue CLI 中可以利用它来复制额外的资源文件。
对于 PWA 应用来说，需要将一些静态资源文件加入打包后的 dist 目录，例如 manifest.json、workbox.js 等，它们将会被用于 PWA 特性的开发。
在 vue.config.js 配置文件中添加 CopyWebpackPlugin：
-- -------------------- ---- ------- ----- ----------------- - ------------------------------ -------------- - - ----------------- - -------- - --- ------------------- --------- - - ----- ------------------------- --- ----------------- -- - ----- ------------------------ --- ---------------------- - - -- - - -展开代码
在这个配置项中，我们向 patterns 数组中添加了两个复制规则。其中，./public/manifest.json 会被复制到 dist 目录下，并重命名为 manifest.json；而 ./public/workbox-*.js 会被重命名为带哈希值的 workbox.[hash:7].js，加入到 dist 目录下。
结语
静态资源的分离是 PWA 应用优化中的重要一环。通过静态资源的分离，我们可以根据不同的策略进行优化，更好地实现快速加载、优质的用户体验等目标。在 Vue CLI 中，我们可以很方便地通过压缩、拆分、复制等插件实现相关的优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb269d306f20b3a6a80e46
