1. 現狀評估和建立指標
        ↓
2. 技術方案設計
        ↓
3. 執行實施
        ↓
4. 結果評估和監控

// 頁面加載時間
const timing = performance.timing;
const pageLoadTime = timing.loadEventEnd - timing.navigationStart;

// 首次繪製時間
const paintEntries = performance.getEntriesByType("paint");
const firstPaint = paintEntries.find((e) => e.name === "first-paint");
const firstContentfulPaint = paintEntries.find(
  (e) => e.name === "first-contentful-paint"
);

// 上報資料
navigator.sendBeacon(
  "/analytics",
  JSON.stringify({
    pageLoadTime,
    firstPaint: firstPaint?.startTime,
    fcp: firstContentfulPaint?.startTime,
  })
);

初始化項目 → 開發除錯 → 測試 → 構建 → 發布

# 統一的命令格式
def init        # 初始化項目
def dev         # 開發除錯
def test        # 執行測試
def build       # 構建
def publish     # 發布

// package.json
{
  "devDependencies": {
    "webpack": "5.88.0", // 鎖定版本
    "vite": "^4.4.0" // 允許小版本更新
  }
}

// 導出
export const name = "module";
export function greet() {}
export default class MyClass {}

// 導入
import MyClass, { name, greet } from "./module.js";
import * as module from "./module.js";

// 動態導入
const module = await import("./module.js");

/* 回應式斷點 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

/* 使用 vw 實現自適應 */
.text {
  font-size: clamp(14px, 4vw, 18px);
}

// History API
history.pushState({ page: 1 }, "Page 1", "/page1");
window.addEventListener("popstate", (e) => {
  // 處理後退
});

// Hash 路由
window.addEventListener("hashchange", () => {
  const hash = location.hash;
  // 根據 hash 渲染對應頁面
});

// 動態導入實現按需加載
const Home = () => import("./pages/Home.vue");
const About = () => import("./pages/About.vue");

// webpack.config.js
module.exports = {
  entry: "./src/index.js", // 入口
  output: {
    // 輸出
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
  },
  module: {
    // 模組處理
    rules: [
      { test: /\.js$/, use: "babel-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ],
  },
  plugins: [
    // 插件
    new HtmlWebpackPlugin(),
  ],
  optimization: {
    // 最佳化
    splitChunks: { chunks: "all" },
  },
};

// vite.config.js
export default {
  plugins: [vue()],
  build: {
    rollupOptions: {},
  },
};