jeremygo

最近在组内推广进行项目（Vue + Express）历史逻辑下线专项，实践完成后产出了一份 SOP，特此记录

SOP（Standard Operating Procedure）: 一种详细的、书面的指导方案，用于指导如何完成特定任务或活动。

删除无用路由与接口#

前置逻辑：

• 开启埋点 SDK PV 插件自动上报或 Vue 插件路由自动上报，注意项目初始访问是否正常上报
• 开启埋点 SDK 接口请求上报功能（在通用请求响应拦截器里设置）

无访问路由#

通过 Druid SQL 从埋点上报数据中查询近三个月页面访问记录，对比项目中路由配置产出未访问历史路由，过滤掉明确需要使用的页面并逐个在项目中搜索确认是否有项目内跳转情况，之后与产品及后端确认剩余页面后才可删除。

附未访问路由匹配产出逻辑：

const fs = require('fs')
const path = require('path')
const list = [] as string[]
// 项目已访问路由数据
const { data } = require('./data.json')

// 遍历目录生成路由列表（针对 nuxt 等约定式路由类项目）
const listFile = (dir: string) => {
  const arr = fs.readdirSync(dir)
  arr.forEach((item: string) => {
    const fullpath = path.join(dir, item)
    const stats = fs.statSync(fullpath)
    if (stats.isDirectory()) {
      listFile(fullpath)
    } else {
      list.push(fullpath)
    }
  })

  return list
}

// 项目已访问过路由列表，移除固定路由前缀
const projectVisitedPathList = data.map(item => item.uri.slice('/project_prefix'.length))

// 项目全量路由列表
const projectPath = '/your-project-path/src/pages'
const projectPathList = listFile(projectPath)
const startLen = projectPath.length
const indexEndString = '/index.vue'
const allPathList = projectPathList.map(item => {
  if (item.endsWith('.vue')) {
    if (item.endsWith(indexEndString)) {
      // 移除前缀目录与 /index.vue 后缀
      return item.slice(startLen, -indexEndString.length)
    }
    // 移除前缀目录与 .vue 后缀
    return item.slice(startLen, -4)
  }
}).filter(item => !!item)

// 将全量目录路由列表与已访问路由列表进行过滤，产出未访问路由
const unVisitedList = allPathList.filter(item => !projectVisitedPathList.includes(item))
// 未访问路由补充固定域名前缀并写入新文件内
fs.writeFileSync('unVisitedList.json', JSON.stringify(unVisitedList.map(item => 'https://xxx.com/project_prefix' + item)))

附查询 SQL：

SELECT
  uri,
  SUM("count") as "total"
FROM
  xxx
WHERE
  "__time" >= @start
  and "__time" <= @end
  and type = '4' // 4 表示 pv 类型
  and appId = @appId
GROUP BY
  uri
ORDER BY
  "total" DESC

无访问接口#

同样通过 Druid SQL 查询近三个月前端接口访问记录，对比项目中接口路由配置产出未访问历史接口，并结合后端服务接口日志确认后删除，查询 SQL 基本同上。

删除无用 Store#

结合路由删除结果在项目内搜索排查对应 Store 是否还在使用：state、getters、mutations、actions，均未使用时可删除。

删除无用线上配置#

结合路由与 Store 删除结果排查相关线上配置是否还在使用，未使用时可删除。

删除无使用模块及变量#

未使用文件 / 变量检测工具对比：

• 删除无用页面后，使用 webpack-deadcode-plugin 工具检测扫描 + 手动确认后删除（注：新增一条 npm script 命令用于后续持续性分析优化）
• 开启未使用变量检测提示，配合 VS Code 插件提示辅助删除
  • 开启 eslint 规则检测 js/ts/vue 文件，针对未使用变量提交时强报错提示
  Copy

  {
    "rules": {    
        "@typescript-eslint/no-unused-vars": [
            "error",
            {
                "argsIgnorePattern": "^_"
            }
      ],
    }
  }
  

  注：官方针对 no-unused-vars 规则不支持自动修复，需要手动修改
  • 开启 tsc 编译配置校验未使用变量与未使用函数参数
  Copy

  {
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
  

  • 手动修改建议优先参考 VS Code 提示，注意以下情况：
    • 未使用函数参数不在末尾时不能直接删除，使用 _ 前缀约定
    • 存在扩展参数解构时，不能直接删除未使用变量导致副作用产生，需要针对特定行禁用语法（同 VS Code 提示）
    • 调用函数返回值声明未使用时 VS Code 提示会删除整段声明 + 调用，这里只删除声明即可
    • service 方法中参数未使用时如 controller 未传入可直接删除，否则使用 _ 前缀约定

监控报警配置#

通用类错误使用埋点 SDK 错误插件已上报，上线前需要调整观察至一个稳定幅度，避免后续干扰
空路由 / 接口访问需要新增采集逻辑：

• 空路由：404 访问页面展示，上报错误埋点，同时可与产品沟通导流逻辑。
• 空接口：服务端新增 Express Router 兜底匹配上报错误日志。
  • 上报逻辑
    Copy

    controller.on('mounted', () => {
        resolve(void 0)
       
       
        // 确保所有路由挂载完成后再处理
        setImmediate(() => {
          app.all('/api/*', function (req: any, res: any) {
            routeLog.error('route_empty_error', {
              pathname: req.path,
              http_method: req.method,
              referer: req.headers.referer
            })
            res.status(404).json()
          })
        })
      })
    

报警配置

验证上线#

在预发验证相应监控报警配置无误后，先上线一台机器观察 3 - 5 天正常后完成上线。