【需求 17679】 perf: 优化版本更新

deploy/deployprod.js

@@ -3,6 +3,7 @@ import ssh from 'ssh2'
 import archiver from 'archiver'
 import fs from 'node:fs'
 import path from 'node:path'
+import inquirer from 'inquirer'
 
 const unzipDirMode = {
   spawn: 'npm run build:prod',
@@ -33,6 +34,13 @@ let conn = new ssh.Client()
 
 async function start() {
   try {
+    if (process.argv.slice(2).includes('--update-info')) {
+      // 0. 获取更新信息
+      const updateInfo = await getUpdateInfo()
+      if (updateInfo.length) {
+        writeUpdateInfo(updateInfo)
+      }
+    }
     // 1. 打包
     await build()
     // 2. 压缩zip
@@ -49,11 +57,44 @@ async function start() {
     // 5. 断开ssh，并删除本地压缩包
     conn.end()
     delZip()
+    delUpdateInfo()
   }
 }
 start()
 
 /**
+ * 0.获取更新信息
+ */
+function getUpdateInfo() {
+  return inquirer
+    .prompt([
+      {
+        type: 'input',
+        name: 'updateInfo',
+        message: '请输入更新信息换行请用空格带条',
+        default: '',
+      },
+    ])
+    .then((res) => {
+      return res.updateInfo.trim()
+    })
+}
+
+function writeUpdateInfo(updateInfo) {
+  fs.writeFileSync(path.resolve(process.cwd(), 'pushUpdate.txt'), updateInfo)
+}
+
+function delUpdateInfo() {
+  try {
+    fs.unlinkSync(path.resolve(process.cwd(), 'pushUpdate.txt'))
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      throw err
+    }
+  }
+}
+
+/**
  * 1. 本地构建项目
  */
 function build() {
@@ -87,11 +128,13 @@ function startZip() {
       gzip: true, // 如果需要压缩，可以使用 gzip
       gzipOptions: { level: 9 }, // gzip 压缩级别
     }).on('error', (err) => reject(err))
-    console.log('zipPath', zipPath)
+    // console.log('zipPath', zipPath)
     const output = fs.createWriteStream(zipPath)
     //监听流的打包
     output.on('close', (err) => {
-      console.log('err', err)
+      if (err) {
+        return console.error('打包失败', err)
+      }
       console.log('目标打包完成')
       resolve(true)
     })

src/main.ts

@@ -11,10 +11,9 @@ import 'virtual:uno.css'
 import 'virtual:svg-icons-register'
 import SvgIcon from '@/components/common/SvgIcon/svgIcon.vue'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import { loopGetVersion } from '@/plugins/pushUpdatePlugin'
 
 if (import.meta.env.MODE === 'production') {
-  loopGetVersion()
+  import('@/utils/version').then(({ loopGetVersion }) => loopGetVersion())
 }
 
 const app = createApp(App)

src/plugins/pushUpdatePlugin.ts

@@ -3,64 +3,49 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 export default function pushUpdatePlugin(): Plugin {
+  // const virtualId = 'virtual:push-update'
+  // const resolveVirtualId = '\0' + virtualId
   return {
     name: 'push-update-plugin',
     apply: 'build',
+    // resolveId(id) {
+    //   if (id === virtualId) {
+    //     return resolveVirtualId
+    //   }
+    // },
+    // load(id) {
+    //   if (id === resolveVirtualId) {
+    //     let updateInfo = ''
+    //     try {
+    //       updateInfo = fs.readFileSync(path.resolve(process.cwd(), 'pushUpdate.txt'), 'utf-8')
+    //     } catch (error) {
+    //       const err = error as NodeJS.ErrnoException
+    //       if (err.code !== 'ENOENT') {
+    //         throw err
+    //       }
+    //     }
+    //     return `export default ${JSON.stringify(updateInfo)}`
+    //   }
+    // },
     writeBundle(options) {
       const version = Date.now().toString()
+      let updateInfo = ''
+      try {
+        updateInfo = fs.readFileSync(path.resolve(process.cwd(), 'pushUpdate.txt'), 'utf-8') || ''
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err.code !== 'ENOENT') {
+          throw err
+        }
+      }
 
       const outDir = options.dir || path.resolve(process.cwd(), 'dist')
       const filePath = path.resolve(outDir, 'version.json')
       fs.writeFileSync(
         filePath,
-        JSON.stringify({ version }, null, 2), // 存成 json
+        JSON.stringify({ version, updateInfo }, null, 2), // 存成 json
         'utf-8',
       )
     },
   }
 }
-
-async function getVersion() {
-  const res = await fetch('/version.json?t=' + Date.now())
-  const data = await res.json()
-  return data.version
-}
-
-export async function loopGetVersion() {
-  const version = await getVersion()
-  let hasShow = false
-  let timer: NodeJS.Timeout | null = null
-  timer = setInterval(async () => {
-    const newVersion = await getVersion()
-    if (newVersion === version) return
-    if (hasShow) {
-      if (timer) {
-        clearInterval(timer)
-      }
-      return
-    }
-    ElNotification({
-      title: '更新提示',
-      type: 'primary',
-      offset: 50,
-      duration: 0,
-      message: () =>
-        h('div', { class: 'flex items-center' }, [
-          '有新版本更新，请',
-          h(
-            ElLink,
-            {
-              type: 'primary',
-              underline: false,
-              onClick: () => {
-                window.location.reload()
-              },
-            },
-            '刷新',
-          ),
-          '页面',
-        ]),
-    })
-    hasShow = true
-  }, 10000)
-}

src/utils/version/index.ts

+async function getInfo() {
+  const res = await fetch('/version.json?t=' + Date.now())
+  const data = await res.json()
+  return data as { version: string; updateInfo: string }
+}
+
+export async function loopGetVersion() {
+  const { version } = await getInfo()
+  let hasShow = false
+  let timer: NodeJS.Timeout | null = null
+  timer = setInterval(async () => {
+    const { version: newVersion, updateInfo: newUpdateInfo } = await getInfo()
+    if (newVersion === version) return
+    if (hasShow) {
+      if (timer) {
+        clearInterval(timer)
+      }
+      return
+    }
+    ElNotification({
+      title: '更新提示',
+      type: 'primary',
+      offset: 50,
+      duration: 0,
+      message: () =>
+        h('div', [
+          h('div', { class: 'flex items-center' }, [
+            '有新版本更新，请',
+            h(
+              ElLink,
+              {
+                type: 'primary',
+                underline: false,
+                onClick: () => {
+                  window.location.reload()
+                },
+              },
+              '刷新',
+            ),
+            '页面',
+            ,
+          ]),
+          newUpdateInfo &&
+            h(
+              'div',
+              { class: 'mt-1' },
+              newUpdateInfo.split(' ').map((str) => h('div', str)),
+            ),
+        ]),
+    })
+    hasShow = true
+  }, 10000)
+}