2025前端工程化与性能优化实战指南：从构建到监控的全链路方案

// vite.config.js
export default {
  builder: {
    buildApp: async (builder) => {
      // 区分开发/生产环境构建逻辑
      const isProduction = process.env.NODE_ENV === 'production';
      return builder.build({
        ...builder.environments,
        bundler: isProduction ? 'rolldown' : 'esbuild'
      });
    },
  },
  // 预编译大型依赖，冷启动提速60%
  optimizeDeps: {
    include: ['lodash-es', 'chart.js'],
    exclude: ['@vueuse/core'] // 排除动态依赖
  }
};

// 路由级代码分割示例（Vue Router）
const routes = [
  {
    path: '/',
    component: () => import('@/views/HomeView.vue') // 首屏核心代码
  },
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '@/views/DashboardView.vue'),
    meta: { lazy: true } // 标记非首屏路由
  }
];

server {
  listen 443 quic; # 启用QUIC协议
  listen 443 ssl; # 兼容HTTPS
  server_name example.com;
  
  # QUIC优化配置
  proxy_quic_buffer_size 8k;
  add_header Alt-Svc 'h3=":443"; ma=86400';
  
  # 静态资源缓存策略
  location ~* \.(jpg|jpeg|png|webp|svg)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
    proxy_pass http://cdn.example.com;
  }
}

<!-- 现代图片加载最佳实践 -->
<picture>
  <source srcset="banner.avif" type="image/avif">
  <source srcset="banner.webp" type="image/webp">
  <img 
    src="banner.jpg" 
    alt="首页 banner"
    loading="lazy" 
    width="1200" 
    height="400"
    decoding="async"
  >
</picture>

/* 动画元素优化 */
.animated-card {
  transform: translateZ(0); /* 触发GPU加速 */
  will-change: transform, opacity; /* 提示浏览器预优化 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-card:hover {
  transform: scale(1.05);
}

// 错误示例：读写交织触发3次重排
function badLayoutUpdate(elements) {
  elements.forEach(el => {
    el.style.width = `${el.offsetWidth + 10}px`; // 读→写→读→写
  });
}

// 优化方案：读写分离+批量更新
function goodLayoutUpdate(elements) {
  // 1. 批量读取布局信息
  const widths = elements.map(el => el.offsetWidth);
  
  // 2. requestAnimationFrame批量写入
  requestAnimationFrame(() => {
    elements.forEach((el, i) => {
      el.style.width = `${widths[i] + 10}px`;
    });
  });
}

// main.js - 主线程
if (window.Worker) {
  const dataProcessor = new Worker('data-processor.js');
  
  // 发送大型数据集
  dataProcessor.postMessage({ 
    dataset: largeCSVData,
    threshold: 0.8
  });
  
  // 接收计算结果
  dataProcessor.onmessage = (e) => {
    renderAnalysisResult(e.data);
    dataProcessor.terminate(); // 任务完成销毁Worker
  };
}

// data-processor.js - Worker线程
self.onmessage = (e) => {
  const { dataset, threshold } = e.data;
  // 耗时计算：百万级数据筛选与聚合
  const result = dataset
    .filter(item => item.score > threshold)
    .reduce((acc, item) => {
      acc[item.category] = (acc[item.category] || 0) + 1;
      return acc;
    }, {});
  self.postMessage(result);
};

// 传统加载：阻塞首屏
import { excelExporter } from './heavy-excel-utils.js';

// ES2025延迟加载：点击时才加载
defer import { excelExporter } from './heavy-excel-utils.js';

// 触发加载
document.getElementById('export-btn').addEventListener('click', async () => {
  await excelExporter.exportTableData(tableData);
});

// 传统链式调用
const processedData = groupBy(
  map(
    filter(dataSet, x => x.score > 60),
    x => ({ ...x, grade: 'A' })
  ),
  'class'
);

// ES2025智能管道
const processedData = dataSet
  |> filter(_, x => x.score > 60)
  |> map(_, x => ({ ...x, grade: 'A' }))
  |> groupBy(_, 'class');

// 实时性能指标采集
const perfObserver = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntriesByType('paint');
  entries.forEach(entry => {
    // 上报核心指标
    if (['first-contentful-paint', 'largest-contentful-paint'].includes(entry.name)) {
      fetch('/api/perf-log', {
        method: 'POST',
        body: JSON.stringify({
          metric: entry.name,
          value: entry.startTime.toFixed(1),
          url: location.href,
          timestamp: Date.now()
        })
      });
    }
  });
});

// 监听绘制指标
perfObserver.observe({ type: 'paint', buffered: true });

# .github/workflows/lighthouse.yml
name: 性能审计
on: [push]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm install && npm run build
      - name: Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: 'https://example.com/'
          configPath: '.lighthouseci.js'
          uploadArtifacts: true