Webpack 生产环境性能优化之PWA

概述

PWA（渐进式网络开发应用程序） 主要由两部分组成：ServiceWorker & disk cache，它让我们的应用程序可以像 APP 一样，离线也能访问，性能也更好。但是由于兼容性问题，现在还没有大面积推广开来（但是大厂有使用，比如说淘宝）。要在项目中真正使用PWA，我们需要借助 workbox 这个库，而在 webpack 中，我们还需要引入 workbox-webpack-plugin 这个插件。

方案应用细节

第一步：在 webpack 配置文件中引入 workbox-webpack-plugin 插件

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

第二步：在 webpack 的 plugin 配置中添加 workbox-webpack-plugin 插件的实例

new WorkboxWebpackPlugin.GenerateSW({

    /**

    * 下面两个参数的作用：

    *  1、帮助serviceWorker快速启动

    *  2、删除旧的 serviceWorker

    */

    clientsClaim:true,

    skipWaiting:true

})

这个插件会自动生成 serviceworker 的配置文件和 workbox 库相关的文件，我们后面需要使用生成的配置文件去注册我们的 serviceworker 。接下来我们用 webpack 打包一下：

打包结果图

第三步：注册 serviceWorker 

if ('serviceWorker' in navigator) { // 兼容性判断

    window.addEventListener('load', () => {// 等所有资源加载完，再注册serviceWorker

        navigator.serviceWorker.register('../dist/service-worker.js')// service-worker.js 这个文件由 workbox-webpack-plugin 插件生成

            .then(() => {

                console.log("serviceworker 注册成功");

            })

            .catch((e) => {

                console.error("serviceworker 注册失败");

            });

        });

}

注册完 serviceWorker 以后，我们就可以在开发者工具的 application tab中找到我们注册的 serviceWorker 了：

serviceWorker注册结果图

我们还可以在 application 中看到使用 service-worker 和 workbox 缓存的文件：

缓存文件信息

这时候你把网络状态调整为 offline 以后，刷新页面还是能正常访问页面，因为我们已经做了文件缓存！当然即使在有网络的状态下刷新页面，浏览器也会优先使用缓存文件：

缓存文件使用情况

结语

我们已经对PWA 技术进行了一次简单而完整的尝试，有兴趣的小伙伴可以去查阅更多的资料，以便对 PWA 有更深入的了解。