【webpack5修行之道】第14篇：性能优化-PWA

jay_mw

于 2021-06-18 09:48:52 发布

阅读量532

点赞数

分类专栏： webpack 文章标签： node.js webpack 前端

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117305623

版权

本文介绍了如何在webpack5中实现PWA性能优化，包括使用workbox-webpack-plugin进行配置，设置service worker，以及验证离线缓存功能。通过这些步骤，可以提升web应用的用户体验，使其具备类似原生应用的功能。然而，需要注意service worker的安全性问题，如淘宝网曾采用PWA技术但后来取消。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：【webpack5修行之道】第13篇：性能优化-懒加载和预加载

PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，能够离线访问。

要使用PWA我们需要使用插件 workbox-webpack-plugin

安装： npm install -D workbox-webpack-plugin

修改webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const { resolve } = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: 'js/[name].[chunkhash:10].js'
  },
  modu