摘要：為了解決這個(gè)問(wèn)題，我的解決方案是使用，這樣就可以將緩存到本地，再次發(fā)布后，會(huì)使舊的失效，重新請(qǐng)求并緩存。結(jié)語(yǔ)幾分鐘就搞定了，然后把之前的一個(gè)基于的后臺(tái)模板項(xiàng)目也升級(jí)了，如果有相同需求的可以參考下。

為什么要添加？因?yàn)椴还苁遣渴鹪?IIS，還是 nginx，每次應(yīng)用部署后，再次訪問(wèn)因?yàn)榕f的 js 已經(jīng)不存在，所以頁(yè)面訪問(wèn)的時(shí)候會(huì)整個(gè)報(bào)錯(cuò)，報(bào)錯(cuò)的結(jié)果就是一個(gè)白屏。   
為了解決這個(gè)問(wèn)題，我的解決方案是使用 PWA ，這樣就可以將 js 緩存到本地，再次發(fā)布后，service-worker.js 會(huì)使舊的 js 失效，重新請(qǐng)求并緩存 js。

如果對(duì)于問(wèn)題這個(gè)有更好的解決方案，務(wù)必請(qǐng)大佬指定一二

yarn 安裝

yarn add sw-precache-webpack-plugin --dev
yarn add uglify-es --dev

npm 安裝

npm install sw-precache-webpack-plugin --dev-dev
npm install uglify-es --dev-dev

下面這些文件忘記出處是哪，Github也能搜到一些，之前寫的 PWA 的 Demo 里面拿過(guò)來(lái)的~

self.addEventListener("install", () => self.skipWaiting())

self.addEventListener("activate", () => {
  self.clients.matchAll({ type: "window" }).then(windowClients => {
    for (let windowClient of windowClients) {
      // Force open pages to refresh, so that they have a chance to load the
      // fresh navigation response from the local dev server.
      windowClient.navigate(windowClient.url)
    }
  })
})

;(function() {
  "use strict"

  // Check to make sure service workers are supported in the current browser,
  // and that the current page is accessed from a secure origin. Using a
  // service worker from an insecure origin will trigger JS console errors.
  var isLocalhost = Boolean(
    window.location.hostname === "localhost" ||
      // [::1] is the IPv6 localhost address.
      window.location.hostname === "[::1]" ||
      // 127.0.0.1/8 is considered localhost for IPv4.
      window.location.hostname.match(
        /^127(?:.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
      )
  )

  window.addEventListener("load", function() {
    if (
      "serviceWorker" in navigator &&
      (window.location.protocol === "https:" || isLocalhost)
    ) {
      navigator.serviceWorker
        .register("service-worker.js")
        .then(function(registration) {
          // updatefound is fired if service-worker.js changes.
          registration.onupdatefound = function() {
            // updatefound is also fired the very first time the SW is installed,
            // and there"s no need to prompt for a reload at that point.
            // So check here to see if the page is already controlled,
            // i.e. whether there"s an existing service worker.
            if (navigator.serviceWorker.controller) {
              // The updatefound event implies that registration.installing is set
              var installingWorker = registration.installing

              installingWorker.onstatechange = function() {
                switch (installingWorker.state) {
                  case "installed":
                    // At this point, the old content will have been purged and the
                    // fresh content will have been added to the cache.
                    // It"s the perfect time to display a "New content is
                    // available; please refresh." message in the page"s interface.
                    break

                  case "redundant":
                    throw new Error(
                      "The installing " + "service worker became redundant."
                    )

                  default:
                  // Ignore
                }
              }
            }
          }
        })
        .catch(function(e) {
          console.error("Error during service worker registration:", e)
        })
    }
  })
})()

"use strict"

const fs = require("fs")
const UglifyJS = require("uglify-es")

module.exports = function(filePath) {
  const code = fs.readFileSync(filePath, "utf-8")
  const result = UglifyJS.minify(code)
  if (result.error) return ""
  return result.code
}

首先引用sw-precache-webpack-plugin和build/load-minified

const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin")
const loadMinified = require("./load-minified")

為 webpack 插件 HtmlWebpackPlugin 添加參數(shù) serviceWorkerLoader: `

  plugins: [
      ....
  new HtmlWebpackPlugin({
      filename:
        process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
      template: "index.html",
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: "dependency",
      serviceWorkerLoader: ``
    }),

并在最后添加 SWPrecacheWebpackPlugin 插件

// service worker caching
new SWPrecacheWebpackPlugin({
  cacheId: "ysj-admin",
  filename: "service-worker.js",
  staticFileGlobs: ["dist/**/*.{js,html,css}"],
  minify: true,
  stripPrefix: "dist/"
})

<%= htmlWebpackPlugin.options.serviceWorkerLoader %>

如下所示

  

  <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
  
   

至此，添加完畢，build 之后查看緩存中是否包含 js 檢驗(yàn)結(jié)果

注意：PWA 應(yīng)用需要在本地上運(yùn)行或者 https 協(xié)議下， 要保證你的頁(yè)面是安全頁(yè)面。

幾分鐘就搞定了，然后把之前的一個(gè)基于VUE的后臺(tái)模板項(xiàng)目也升級(jí)了，如果有相同需求的可以參考下。

倉(cāng)庫(kù)地址：https://github.com/yimogit/me...
線上預(yù)覽：https://vue-admin.yimo.link/