プロジェクトの歴史的論理オフライン

最近、プロジェクト（Vue + Express）の歴史的ロジックのオフライン特集をチーム内で推進し、実践を完了した後に SOP を作成しましたので、ここに記録します。

SOP（Standard Operating Procedure）: 特定のタスクや活動を完了する方法を指導するための詳細な書面によるガイドラインです。

無用なルートとインターフェースの削除#

前提条件：

埋め込み SDK の PV プラグイン自動報告または Vue プラグインのルート自動報告を有効にし、プロジェクトの初期アクセスが正常に報告されているか確認します。

埋め込み SDK のインターフェースリクエスト報告機能を有効にします（一般的なリクエスト応答インターセプターで設定）。

アクセスのないルート#

Druid SQLを使用して、埋め込み報告データから過去 3 ヶ月のページアクセス記録を照会し、プロジェクト内のルート設定と比較して未アクセスの履歴ルートを生成します。明確に使用する必要があるページをフィルタリングし、プロジェクト内で個別に検索して、プロジェクト内の遷移があるか確認します。その後、製品およびバックエンドと確認した残りのページを削除できます。

未アクセスルートのマッチング生成ロジック：

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を使用して過去 3 ヶ月のフロントエンドインターフェースアクセス記録を照会し、プロジェクト内のインターフェースルート設定と比較して未アクセスの履歴インターフェースを生成し、バックエンドサービスのインターフェースログと確認した後に削除します。クエリ SQLは基本的に上記と同じです。

無用な `Store` の削除#

ルート削除結果に基づいて、プロジェクト内で対応する Store がまだ使用されているかを検索して確認します：state、getters、mutations、actions がすべて未使用の場合は削除できます。

無用なオンライン設定の削除#

ルートと Store の削除結果に基づいて、関連するオンライン設定がまだ使用されているかを確認し、未使用の場合は削除できます。

無使用モジュールおよび変数の削除#

未使用ファイル / 変数検出ツールの比較：

ツール	原理	主な作用	備考
webpack-deadcode-plugin	webpack が生成した stats ファイルを使用し、webpack がソースファイルをコンパイルする際に生成されるモジュールに関する統計データを含む JSON ファイルこれらの統計データは、開発者がアプリケーションの依存関係を分析するのに役立つだけでなく、コンパイル速度を最適化することもできます	webpack に基づく簡単な分析、スキャン結果には未使用ファイルと未使用変数が含まれます	結果は比較的正確で、カバレッジが広く、使用を推奨分析ファイルを生成した後、参考として手動で確認して削除（現在のファイル内で使用されているがエクスポートされていない場合は誤報が発生する可能性があります）
useless-files-webpack-plugin	同上	webpack に基づく簡単な分析、主にファイルが未使用かどうかを確認し、自動削除を設定できます	検出ロジックは類似しており、機能は前者より劣ります
find-unused-exports	babel と postcss に基づいてプロジェクト内の無用モジュールを探します	単純な js で実装されたファイル依存に基づく分析パッケージ	最初の項目と組み合わせて分析できます
ts-prune	TypeScript サービスは実用的な API を提供します：findAllReferences ts-morph ライブラリは findAllReferences を含むいくつかの低レベル API をラップし、より簡潔で使いやすい呼び出し方法を提供します ts-prune は ts-morph に基づいてラップされています	ファイル内でエクスポートされた変数が使用されているかどうかを分析できます	機能は前者より劣り、全エクスポート、vue ファイルのインポートなどの状況で干渉が大きい使用は推奨されません（今後のコード作成でも全エクスポートの書き方はできるだけ避けるべきです）

無用なページを削除した後、webpack-deadcode-pluginツールで検出スキャンを行い、手動で確認してから削除します（注：今後の継続的な分析最適化のために新しい npm script コマンドを追加します）。
未使用変数検出の警告を有効にし、VS Code プラグインの警告を利用して削除を支援します。
- js/ts/vueファイルに対して未使用変数を提出する際に強制的にエラーを報告するために、eslintルールを有効にします。
```
{
  "rules": {    
      "@typescript-eslint/no-unused-vars": [
          "error",
          {
              "argsIgnorePattern": "^_"
          }
    ],
  }
}
```
注：公式のno-unused-varsルールは自動修正をサポートしていないため、手動で修正する必要があります。
- tscコンパイル設定を有効にして、未使用の変数と未使用の関数パラメータを検証します。
```
{
  "noUnusedLocals": true,
  "noUnusedParameters": true
}
```
- 手動修正の際は、VS Code の警告を優先して参考にし、以下の状況に注意します：
  - 未使用の関数パラメータが末尾でない場合は直接削除できず、_プレフィックスの規約を使用します。
  - 拡張パラメータの分解がある場合、未使用の変数を直接削除すると副作用が発生するため、特定の行で構文を無効にする必要があります（VS Code の警告に従います）。
  - 関数の戻り値の宣言が未使用の場合、VS Code の警告は宣言と呼び出し全体を削除しますが、ここでは宣言のみを削除します。
  - service メソッドのパラメータが未使用の場合、controller が渡されていない場合は直接削除できますが、そうでない場合は_プレフィックスの規約を使用します。

監視アラート設定#

一般的なエラーは埋め込み SDK エラープラグインで報告されており、オンライン前に安定した幅に調整する必要があります。後続の干渉を避けるためです。
空のルート / インターフェースアクセスには新しい収集ロジックを追加する必要があります：

空のルート：404 アクセスページを表示し、エラー埋め込みを報告し、同時に製品と流入ロジックをコミュニケーションします。

空のインターフェース：サーバー側で新しいExpressルーターを追加してマッチングし、エラーログを報告します。

報告ロジック

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()
      })
    })
  })

アラート設定

モジュール	機能	アラート戦略（プロジェクトの実際の状況に基づく）
Vue Error	Vue の全体的なエラーキャッチ	xx 分の急増 xxx
ReferenceError	参照エラー	xx 分の急増 xxx
TypeError	型エラー	xx 分の急増 xxx
空のルートアクセス	空のルートの埋め込み報告	xx 分で xx 回発生
空のインターフェースアクセス	空のインターフェースログ収集報告	xx 分で xx 回発生

上線の検証#

事前検証で監視アラート設定に誤りがないことを確認した後、まず 1 台のマシンをオンラインにし、3〜5 日正常に運用された後に上線を完了します。