webpack性能优化之PWA

1.安装插件

workbox-webpack-plugin

并引入webpack.config.js

npm i workbox-webpack-plugin -D

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

plugins:[
     new WorkboxWebpackPlugin.GenerateSW({ // pwa插件
      /**
       * 1帮助serviceworkbox快速启动
       * 2删除旧的serviceworker
       *
       * 此插件生成一个serviceworker.js配置文件
       */
      clientsClaim: true,
      skipWaiting: true,
    }),       
]

2.入口文件中

注册serviceWorker

/**
 * 注册serviceWorker
 * 处理兼容性问题
 *
 * 注意
 * 1.eslint不认识window navigator全局变量
 * 需修改package.json的eslintConfig加上
 * "env": {
 *    "browser": true
 *  }
 * 2.sw代码必须运行在服务器上
 *  nodejs
 *  serve -s dist
 *
 *
 */
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then(() => {
        console.log('sw注册成功');
      })
      .catch(() => { console.log('sw注册失败'); });
  });
}

3.serve -s dist 启动   dist为打包后的资源文件