Jac 前端攻城屍的玻璃心: 3月 2022

2022年3月5日星期六

vue-cli打包出gzip, brotli檔，讓網頁讀取更加快速，順便說說chunk好了

如果你的伺服器是用nginx架設，那你可以跳過本教學

就我理解到的差異，nginx伺服器可以線上轉譯，所以在伺服器上只需提供原始檔，在讀取檔案時就可以及時把壓縮檔演算出來

想像情境為
browser 訪問 nginx
nginx 找到 file.js
file.js 透過 nginx 轉譯為file.js.gz
file.js.gz 回傳 nginx
nginx 回傳給 browser

大概會是這麼個流程(當然是很粗略的)，但是線上即時轉譯吃的是伺服器的CPU，同時壓縮比越高，佔用的效能也越大，例如brotli雖然壓縮率較gzip高，但卻相當吃效能，所以大多還是採用gzip，線上轉譯固然方便，但流量大就需要考量到效能問題

因為一些原因，絕對不是因為我懶得去學nginx配置，我使用http-server架設伺服器，打個參數-g(gzip) -b(brotli)伺服器就會該靜態檔案找尋同名壓縮檔，http-server不會幫你轉譯為壓縮格式，所以gz, br檔要自行準備，官方說br會較優先使用，其次才是gz

那要如何產生呢，這就是本篇的中點(其中也包含套件分割打包chunk的配置)

// vue.config.js 設定如下

const baseConfig = {
    ...setting
}
// 正是打包才需要壓縮，不然平常開發會爆慢
if (isProd) {
  const zopfli = require("@gfx/zopfli")
  var zlib = require("zlib")
  baseConfig.configureWebpack = {
    ...baseConfig.configureWebpack,
    ...{
      // 把套件分割打包，可以縮小每個檔案的體積，增加讀取速度
      optimization: {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 0,
          maxSize: 4000000,
          cacheGroups: {
            common: {
              name: "chunk-common",
              chunks: "initial",
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 1,
              reuseExistingChunk: true,
              enforce: true,
            },
            vendors: {
              name: "chunk-vendors",
              test: /[\\/]node_modules[\\/]/,
              chunks: "initial",
              priority: 2,
              reuseExistingChunk: true,
              enforce: true,
            },
            lodash: {
              name: "chunk-lodash",
              test: /[\\/]node_modules[\\/]lodash[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true,
            },
            styles: {
              name: "styles",
              test: /\.s?[ac]ss$/,
              chunks: "all",
              minChunks: 1,
              reuseExistingChunk: true,
              enforce: true,
            },
          },
        },
      },
    },
  }
  baseConfig.pluginOptions = {
    compression: {
      brotli: {
        filename: "[file].br[query]",
        algorithm: "brotliCompress",
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
          },
        },
        minRatio: 0.8,
      },
      gzip: {
        filename: "[file].gz[query]",
        algorithm: "gzip",
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        minRatio: 0.8,
      },
      // 目前壓縮率最高的演算法
      zopfli: {
        compressionOptions: {
          numiterations: 15,
        },
        algorithm(input, compressionOptions, callback) {
          return zopfli.gzip(input, compressionOptions, callback)
        },
      },
    },
  }
}
module.exports = baseConfig

最後就會產出

dist/service-worker.js

dist/service-worker.js.gz

dist/service-worker.js.br

......

雖然br, gz選一個就好了，我只是示範給大家看，絕對不是我懶得拿掉！！

小結：
當初研究這個是因為萬惡的IE載入速度太慢(謎之音：那些該死的公家機關還讓ie可以用到2029年)，加上一個vendor.js有近20MB，光是要看到畫面得花上近半分鐘，無奈之下不得不研究一下加速，現在打包完，大多剩下幾byte到幾百K，事實上這也是很多人認為一般工程師與資深工程師的分水嶺，雖然我不這麼認同就是了，畢竟這些東西花上半天一天上網查就會了，比起經年累月累積起來的“實力”，我覺得後者更值得參考，不過學起來薪水多一點，何樂而不為呢？

vue cli使用pwa，所以你需要ssl憑證？

首先必須說，第一次接觸pwa對這功能有點抽象，只知道他是一個可以讓你在手機或軟體run起來的技術，這過程要分兩個階段，第一個階段要讓網站可以安裝，有個前提是網站必須是https協定，所以我們要申請ssl憑證，

小弟也不是專業維運，也不想花錢，所以參考這個網站https://kkplay3c.net/ssl-for-free/

這時你還需要一個domain，這也不難，上godaddy買一個就好了，但因為一些原因，所以我用了一個正在使用的domain，盡到管理dns後，用A新加了一個subdomain，然後使用CNAME來進行dns認證，設定完大概就如下圖，CNAME TTL時間有限制3600以下

由於的前端伺服器是用http-server架，所以走https很快，下個參數就好了，指定一下cert就搞定了

再來就是manifest.json跟service-worker.js了，還有一個registerServiceWorker.js(不過這個通常cli當初會自動幫你產生，不過重新寫一個也沒這麼難拉)

要由webpack專案產出前兩個檔案(沒錯你不用從頭到尾自己寫，後面我會說為什麼不能自己寫)，現在你需要的是@vue/cli-plugin-pwa，裝完你就可以在vue.config.js裡面加上pwa後開始撰寫，寫完大致上如下

pwa: {
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    // 自己寫service-worker.js所以用InjectManifest，自動生成可以用GenerateSW
    workboxPluginMode: "InjectManifest", 
    workboxOptions: { // 其餘globPatten...都已經預設好了
      swSrc: "src/service-worker.js", // 指定路徑
    },
    manifestOptions: {
      name: "hellpPWA",
      description: "Hello world",
    },
  },

但這邊說明一下，本地測試是讀不到自定義service-worker.js的，打開chrome devtools，可以看到service-worker.js有註冊，但點進去內容卻不是自己所寫的內容

這時不用慌裝，build完，在嘗試把server run起來就會看到了，連cache也產生了

最後來說一下service-worker.js內容

話說中間一度找到google有推出workbox-cli可以透過配置產出service-worker，但vue-cli打包已經會幫忙整理出靜態檔了，再加上service-worker有些內容需要客製化，所以這個方法作罷

//下面這行在build後會自動被注入，內容包含worker class，靜態資料陣列
importScripts("/precache-manifest.f3a4893d64f1a024f6a4c41422ee032a.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

// cache前綴
workbox.core.setCacheNameDetails({ prefix: "CSD" })

// 取得cache name
const cacheVersion = workbox.core.cacheNames.precache

self.__precacheManifest = [].concat(self.__precacheManifest || [])
// 把靜態資料檔寫入快取
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

// service-worker安裝
self.addEventListener("install", (event) => {
  console.log("[ServiceWorker] Install")
  self.skipWaiting()
  // 把靜態資料寫入快取(手動)
  // event.waitUntil(
  //   caches.open(cacheVersion).then((cache) => {
  //     console.log("[ServiceWorker] Caching app shell")
  //     return cache.addAll(self.__precacheManifest)
  //   })
  // )
})

// service-worker啟動
self.addEventListener("activate", (event) => {
  console.log("[ServiceWorker] Activate")
  // 移除其他cache
  event.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(
        keyList.map((key) => {
          if (key !== cacheVersion) {
            return caches.delete(key)
          }
        })
      )
    })
  )
})

// ajax時觸發
self.addEventListener("fetch", (event) => {
  // console.log("[ServiceWorker] fetch")
  // GET時調用
  if (event.request.method == "GET") {
    // console.log(event.request)
    const isOnline = navigator.onLine
    event.respondWith(
      // 快取比對
      caches.match(event.request).then(function (resp) {
        return isOnline
          // 在線優先使用api
          ? fetch(event.request).then(function (response) {
              return caches.open(cacheVersion).then(function (cache) {
                cache.put(event.request, response.clone())
                return response
              })
            })
          // 離線使用快取資料
          : resp
      })
    )
  }
})

以上都完成就可以在網址列看到下載按鈕拉

小結：
整套寫完下來，service-worker感覺更像是一種攔截機制，其大多數重點還是在於快取，雖然一般情況使用自動生成的service-worker已經很夠用，但我遇到這個案子比較特殊，需要再無網路環境下運行，所以有些細節要自己寫，這也讓我有機會稍稍深入研究，無論是api的快取或是靜態檔案的快取(即便有網路速度也會更快)，感覺有點像是本地cdn，或許還有更多可能性我沒有用到或想到，總之也是個很有趣的經驗，不僅學會pwa也第一次申請了ssl憑證，以此作一下紀錄。

備註：
網路上有說pwa只能運行在https或localhost環境，https確定是可以，但我在試localhost常會莫名失效，最後build完用http-server run起來，又可以了，好吧～早點睡吧～

2022年3月5日 星期六

vue-cli打包出gzip, brotli檔，讓網頁讀取更加快速，順便說說chunk好了

vue cli使用pwa，所以你需要ssl憑證？

2022年3月5日星期六