前端工程化与性能优化 面试核心

系统掌握工程化体系、构建原理、性能优化与监控，从容应对中高级前端面试

1 前端工程化概述

工程化四大支柱

工程化流水线

2 构建工具原理

Webpack 构建流程

// webpack.config.js 核心配置
const path = require('path');

module.exports = {
  entry: './src/index.js',         // 入口
  output: {
    path: path.resolve('dist'),     // 输出目录
    filename: '[name].[contenthash].js',
    clean: true,                   // 每次构建清理 dist
  },
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new MiniCssExtractPlugin(),
  ],
};

Vite：下一代构建工具

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: { port: 3000, open: true },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
});

Tree Shaking

Code Splitting 代码分割

// 1. 动态 import — 路由级懒加载
const routes = [
  { path: '/dashboard', component: () => import('./views/Dashboard.vue') },
  { path: '/settings',  component: () => import('./views/Settings.vue') },
];

// 2. Webpack splitChunks 配置
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /node_modules/,
        name: 'vendor',
        priority: 10,
      },
      common: {
        minChunks: 2,
        name: 'common',
        priority: 5,
      },
    },
  },
}

3 代码规范

ESLint + Prettier 配置

// .eslintrc.js
module.exports = {
  root: true,
  env: { browser: true, node: true, es2022: true },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',   // 必须放最后，关闭与 Prettier 冲突的规则
  ],
  rules: {
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    'no-unused-vars': 'error',
    'vue/multi-word-component-names': 'off',
  },
};

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100
}

Husky + lint-staged (Pre-commit Hook)

// package.json
{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
    "*.{css,scss}": ["prettier --write"]
  }
}

# 安装 & 配置 Husky
npx husky init
# 创建 pre-commit hook
echo "npx lint-staged" > .husky/pre-commit

Commitlint (规范提交信息)

# commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat',     // 新功能
      'fix',      // 修复
      'docs',     // 文档
      'style',    // 格式(不影响逻辑)
      'refactor', // 重构
      'perf',     // 性能优化
      'test',     // 测试
      'chore',    // 构建/工具
    ]],
  },
};

# .husky/commit-msg
npx --no -- commitlint --edit $1

4 CI/CD 流水线

流水线图解

GitHub Actions 示例

# .github/workflows/ci.yml
name: CI Pipeline
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm run lint
      - run: npm run test:unit
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Jenkinsfile 示例

pipeline {
  agent { docker { image 'node:20-alpine' } }
  stages {
    stage('Install')  { steps { sh 'npm ci' } }
    stage('Lint')    { steps { sh 'npm run lint' } }
    stage('Test')    { steps { sh 'npm run test:unit' } }
    stage('Build')   { steps { sh 'npm run build' } }
    stage('Deploy')  {
      steps {
        sh 'rsync -az --delete dist/ server:/var/www/html/'
      }
    }
  }
  post {
    failure { // 通知开发团队 }
    success { // 部署成功通知 }
  }
}

环境管理策略

5 性能指标 (Core Web Vitals)

Google 定义的核心 Web 指标，直接影响 SEO 排名和用户体验。

核心指标仪表盘

测量工具

// 使用 web-vitals 库采集真实指标
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP((metric) => {
  // 发送到监控后端
  sendToAnalytics({ name: 'LCP', value: metric.value, rating: metric.rating });
});
onINP((metric) => { /* ... */ });
onCLS((metric) => { /* ... */ });

6 性能优化实战

加载优化

Resource Hints 资源提示

<head>
  <!-- DNS 预解析 -->
  <link rel="dns-prefetch" href="//cdn.example.com">
  <!-- 预连接 (DNS + TCP + TLS) -->
  <link rel="preconnect" href="https://api.example.com" crossorigin>
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
  <!-- 空闲时预获取 -->
  <link rel="prefetch" href="/js/about-page.js">
</head>

图片优化

<!-- 响应式图片 + WebP + 懒加载 -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img
    src="hero.jpg"
    alt="Hero"
    loading="lazy"
    width="800" height="400"
    srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"
    sizes="(max-width: 600px) 400px, 800px"
  />
</picture>

字体优化

<style>
  @font-face {
    font-family: 'MainFont';
    src: url('/fonts/main-subset.woff2') format('woff2');
    font-display: swap;    /* 先用系统字体，加载完再替换 */
    unicode-range: U+4E00-9FFF; /* 只加载中文字符子集 */
  }
</style>

Bundle 分析

// vite.config.ts — 使用 rollup-plugin-visualizer 分析
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({ open: true, gzipSize: true }),
  ],
});

运行时优化

防抖与节流

// 防抖实现
function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// 节流实现
function throttle(fn, interval = 300) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}

虚拟滚动 (Virtual Scrolling)

// 原理：只渲染可视区域的 DOM，10万条数据也只渲染 20-30 个 DOM 节点
const visibleItems = computed(() => {
  const startIdx = Math.floor(scrollTop.value / itemHeight);
  const endIdx = startIdx + visibleCount;
  return allItems.slice(startIdx, endIdx);
});

requestAnimationFrame 动画

// 不要用 setInterval 做动画，用 rAF 与浏览器刷新率同步
function animate() {
  // 更新动画状态
  element.style.transform = `translateX(${x}px)`;
  if (x < target) {
    requestAnimationFrame(animate); // 递归调用，约60fps
  }
}
requestAnimationFrame(animate);

Web Worker 重计算

// 主线程
const worker = new Worker('/workers/heavy-compute.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  // 拿到结果，不阻塞 UI
  updateUI(e.data.result);
};

// heavy-compute.js
self.onmessage = (e) => {
  const result = heavyProcessing(e.data);
  self.postMessage({ result });
};

渲染优化

关键渲染路径优化

CSS Containment & will-change

/* CSS Containment — 限制浏览器重排/重绘范围 */
.card-list {
  contain: layout style paint;  /* 隔离渲染边界 */
}

.animated-element {
  will-change: transform, opacity;  /* 提示浏览器提前优化 */
}

/* 注意：不要滥用 will-change，它本身也有内存开销 */

7 监控与埋点

错误监控

// 1. Sentry — 最流行的错误监控平台
import * as Sentry from '@sentry/vue';

Sentry.init({
  dsn: 'https://xxx@sentry.io/project',
  integrations: [Sentry.browserTracingIntegration()],
  tracesSampleRate: 0.1,  // 采样 10%
  release: 'my-app@1.2.3',
});

// 2. 全局错误捕获
// JS 运行时错误
window.onerror = (msg, source, line, col, error) => {
  reportError({ type: 'js_error', msg, source, line, col, stack: error?.stack });
  return false;
};

// Promise 未捕获异常
window.addEventListener('unhandledrejection', (e) => {
  reportError({ type: 'promise_error', reason: e.reason });
});

// 3. Vue 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  Sentry.captureException(err);
};

性能监控

// Navigation Timing API — 页面加载各阶段耗时
const [nav] = performance.getEntriesByType('navigation');
const metrics = {
  dns: nav.domainLookupEnd - nav.domainLookupStart,
  tcp: nav.connectEnd - nav.connectStart,
  ttfb: nav.responseStart - nav.requestStart,
  download: nav.responseEnd - nav.responseStart,
  domParse: nav.domInteractive - nav.responseEnd,
  load: nav.loadEventEnd - nav.startTime,
};

// Resource Timing API — 单个资源加载耗时
const resources = performance.getEntriesByType('resource');
resources.forEach(r => {
  if (r.duration > 3000) {
    reportSlowResource({ name: r.name, duration: r.duration });
  }
});

用户行为埋点

// 基础埋点策略
const tracker = {
  // 页面浏览
  pageView(page) {
    send({ event: 'pv', page, timestamp: Date.now() });
  },
  // 用户点击
  click(target, metadata) {
    send({ event: 'click', target, ...metadata });
  },
  // 自定义事件
  track(eventName, data) {
    send({ event: eventName, ...data });
  },
};

// 声明式埋点：Vue 自定义指令
app.directive('track', {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      tracker.track(binding.value);
    });
  },
});
// <button v-track="'submit_order'">提交订单</button>

8 面试题精选 (25道)

点击问题展开答案 ↓

前端工程化与性能优化 — 面试备战手册 | 全栈知识库