webpack系列文章：

【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！
【Webpack 性能优化系列(7) - 懒加载和预加载】
【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！
【Webpack 性能优化系列(4) - 缓存】详解如何做bable缓存和文件资源缓存
【Webpack 性能优化系列(3) - oneOf】
【Webpack 性能优化系列(2) - source-map】
【Webpack 性能优化系列(1) - HMR 热模块替换】
【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！
【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？
【Webpack 简介及五个核心概念】

PWA

渐进式网络应用程序(progressive web application - PWA)可以为我们的项目添加离线体验，使用名为 Workbox 的 Google 项目，帮助我们更简单地为 web app 提供离线支持。

正常情况下，如果停止 server 然后刷新，则网页不再可访问。

比如掘金https://juejin.cn/，有网络时正常访问：

No throttling改为Offline关闭网络

再次刷新，网页不可访问：

淘宝使用了PWA技术，访问淘宝网关闭网络，刷新

可以看到关闭网络后网页依然可以访问，从network中能看到没有问题的资源基本上都是来自于ServiceWorker，就是来自PWA技术提供的资源

PWA的使用：

添加 workbox-webpack-plugin 插件，然后调整 webpack.config.js 文件：

npm install workbox-webpack-plugin --save-dev

webpack.config.js

  const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const WorkboxPlugin = require('workbox-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js',},plugins: [new HtmlWebpackPlugin({+       title: 'Progressive Web Application',}),
+     new WorkboxPlugin.GenerateSW({+       //1. 帮助serviceworker快速启动
+       //2. 删除旧的 serviceworker+       //生成一个 serviceworker 配置文件~
+       clientsClaim: true,
+       skipWaiting: true,
+     }),],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),clean: true,},};

完成这些设置，构建项目

...Asset       Size  Chunks                    Chunk Namesapp.bundle.js     545 kB    0, 1  [emitted]  [big]  appprint.bundle.js    2.74 kB       1  [emitted]         printindex.html  254 bytes          [emitted]
precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js  268 bytes          [emitted]service-worker.js       1 kB          [emitted]
...

现在你可以看到，生成了两个额外的文件：service-worker.js 和名称冗长的 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。service-worker.js 是 Service Worker 文件，precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 是 service-worker.js 引用的文件，所以它也可以运行。你本地生成的文件可能会有所不同；但是应该会有一个 service-worker.js 文件。

我们现在已经创建出一个 Service Worker。

注册 Service Worker

通过在入口文件添加以下注册代码来注册 Service Worker：

index.js

import { mul } from './test';
import '../css/index.css';function sum(...args) {return args.reduce((p, c) => p + c, 0);
}// eslint-disable-next-line
console.log(mul(2, 3));
// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));+ /*
+   1. eslint不认识 window、navigator全局变量
+     解决：需要修改package.json中eslintConfig配置
+       "env": {
+         "browser": true // 支持浏览器端全局变量
+       }
+    2. sw代码必须运行在服务器上
+       --> nodejs
+       -->
+         npm i serve -g
+         serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
+ */
+ // 注册serviceWorker
+ // 处理兼容性问题
+ if ('serviceWorker' in navigator) {+   window.addEventListener('load', () => {+     navigator.serviceWorker
+       .register('/service-worker.js')
+       .then(() => {+         console.log('sw注册成功了~');
+       })
+       .catch(() => {+         console.log('sw注册失败了~');
+       });
+   });
+ }

再次构建项目

现在来进行测试。停止 server 并刷新页面。如果浏览器能够支持 Service Worker，应该可以看到你的应用程序还在正常运行。

2021/11/19 update

目前来看淘宝已经下线了pwa (简单测试了一下，不严谨)，搜了网上以前支持pwa的项目都已经不支持了

【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验相关推荐

【Webpack 性能优化系列(1) - HMR 热模块替换】
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(8) - PWA]使用渐进式网络应用程序为我们的项目添 ...
【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(8) - PWA]使用渐进式网络应用程序为我们的项目添 ...
推荐：Java性能优化系列集锦
Java性能问题一直困扰着广大程序员,由于平台复杂性,要定位问题,找出其根源确实很难.随着10多年Java平台的改进以及新出现的多核多处理器,Java软件的性能和扩展性已经今非昔比了.现代JVM持续演 ...
webpack性能优化全方案
提升webpack性能优化无非从两个方面入手: 1.如何构建速度 2.如何优化打包后的文件如何文件构建速度 webpack构建的过程,其实是把,从入口开始,通过AST语法树分析,把所有依赖的模块,结 ...
【Linux 性能优化系列】Linux 性能优化 -- CPU 性能篇(三) Linux 软中断
[Linux 性能优化系列]Linux 性能优化 -- CPU 性能篇(三) Linux 软中断 [1]相关概念 [1.1]中断中断其实是一种异步的事件处理机制,可以提高系统的并发处理能力:为了减少 ...
性能优化系列：每个程序员都应该知道的数字
目录前言正文看这些数据的目的 1)CPU非常非常快 2)内存很快了,但是相比CPU来说还是太慢了 3)磁盘性能非常非常慢 4)磁盘顺序I/O比随机读I/O快很多 5)网络传输也是比较耗时的,基本 ...
Android性能优化系列之apk瘦身
Android性能优化系列之布局优化 Android性能优化系列之内存优化为什么APK要瘦身.APK越大,在下载安装过程中,他们耗费的流量会越多,安装等待时间也会越长:对于产品本身,意味着下载转化率 ...
Android App 性能优化系列结语篇
Android App 性能优化系列结语篇原文出处:http://gold.xitu.io/post/581f4ad667f3560058a33057 关于Android App的优化, 从第一篇的 ...
【MySQL性能优化系列】百万数据limit分页优化
背景众所周知,在使用limit分页过程中,随着前端传过来的PageSize越来越大,查询速度会越来越慢.那有什么优化的办法呢? 本文将通过百万数据表进行演示和优化, 欲知详情,请看下文分解. lim ...

【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验

PWA

【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验相关推荐

最新文章

热门文章