Kerwin's Lab

Appearance

前端工程化实践 ​

前端工程化是指运用工程化方法和工具来规范前端开发流程、提高开发效率、保障代码质量和项目可维护性的实践。本文将介绍前端工程化的核心概念和实践方法。

前端工程化的价值 ​

  1. 提高开发效率：自动化工具链减少重复性工作
  2. 保障代码质量：规范、测试、检查机制确保代码质量
  3. 提升团队协作：统一规范和工具链减少协作成本
  4. 简化部署流程：自动化构建和部署减少人为错误
  5. 优化用户体验：自动化性能监控和优化

代码规范与质量保证 ​

ESLint 配置 ​

json
// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2021
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    'prefer-const': 'error',
    'no-var': 'error'
  }
}

Prettier 配置 ​

json
// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Git Hooks ​

使用 husky 和 lint-staged 设置 Git Hooks：

json
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "prettier --write",
      "git add"
    ],
    "*.{css,scss,less}": [
      "prettier --write",
      "git add"
    ]
  }
}

构建优化 ​

Webpack 配置优化 ​

javascript
// vue.config.js (Vue CLI 项目)
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = defineConfig({
  transpileDependencies: true,
  
  // 生产环境源码映射
  productionSourceMap: false,
  
  // 输出目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'static',
  
  // 开发服务器配置
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  // Webpack 配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      // Gzip 压缩
      ...(isProduction ? [new CompressionWebpackPlugin()] : [])
    ],
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: 5,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      }
    }
  }
});

Vite 配置优化 ​

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    vue(),
    // 打包分析
    visualizer({
      open: false,
      gzipSize: true,
      brotliSize: true
    })
  ],
  
  // 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  
  // 构建配置
  build: {
    // 输出目录
    outDir: 'dist',
    
    // 静态资源目录
    assetsDir: 'static',
    
    // 压缩选项
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    
    // 代码分割
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'vuex'],
          element: ['element-plus']
        }
      }
    },
    
    // 构建报告
    reportCompressedSize: false,
    
    // 生成 source map
    sourcemap: false
  },
  
  // 开发服务器配置
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

测试策略 ​

单元测试 ​

javascript
// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'json', 'vue', 'ts'],
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleNameMapping: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  collectCoverageFrom: [
    'src/**/*.{js,ts,vue}',
    '!src/main.ts',
    '!**/node_modules/**'
  ],
  coverageReporters: ['text', 'lcov', 'html'],
  setupFiles: ['<rootDir>/tests/setup.js']
};

组件测试示例 ​

typescript
// tests/unit/HelloWorld.spec.ts
import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = mount(HelloWorld, {
      props: { msg }
    });
    
    expect(wrapper.text()).toMatch(msg);
  });
  
  it('increments count when button is clicked', async () => {
    const wrapper = mount(HelloWorld);
    const button = wrapper.find('button');
    
    await button.trigger('click');
    
    expect(wrapper.vm.count).toBe(1);
  });
});

端到端测试 ​

typescript
// tests/e2e/example.spec.ts
import { test, expect } from '@playwright/test';

test('homepage loads correctly', async ({ page }) => {
  await page.goto('/');
  
  // 期望页面标题包含应用名称
  await expect(page).toHaveTitle(/Vue App/);
  
  // 期望主标题可见
  const heading = page.locator('h1');
  await expect(heading).toBeVisible();
  await expect(heading).toContainText('Welcome');
  
  // 期望导航链接工作正常
  await page.click('text=About');
  await expect(page).toHaveURL(/about/);
});

自动化部署 ​

GitHub Actions 配置 ​

yaml
# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [16.x, 18.x]
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run linting
        run: npm run lint
      
      - name: Run tests
        run: npm run test:unit
      
      - name: Build project
        run: npm run build
  
  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build project
        run: npm run build
      
      - name: Deploy to server
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd /var/www/html
            git pull origin main
            npm ci
            npm run build
            pm2 restart app

性能监控与优化 ​

性能监控 ​

typescript
// utils/performance.ts
export class PerformanceMonitor {
  private static instance: PerformanceMonitor;
  
  static getInstance(): PerformanceMonitor {
    if (!PerformanceMonitor.instance) {
      PerformanceMonitor.instance = new PerformanceMonitor();
    }
    return PerformanceMonitor.instance;
  }
  
  // 页面加载性能
  observePageLoad(): void {
    window.addEventListener('load', () => {
      setTimeout(() => {
        const performanceData = this.getPerformanceData();
        this.sendPerformanceData(performanceData);
      }, 0);
    });
  }
  
  // 获取性能数据
  private getPerformanceData() {
    const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    
    return {
      // DNS 查询时间
      dns: navigation.domainLookupEnd - navigation.domainLookupStart,
      
      // TCP 连接时间
      tcp: navigation.connectEnd - navigation.connectStart,
      
      // 请求响应时间
      request: navigation.responseEnd - navigation.requestStart,
      
      // DOM 解析时间
      dom: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
      
      // 页面加载总时间
      loadTime: navigation.loadEventEnd - navigation.loadEventStart,
      
      // 首次内容绘制
      fcp: this.getFirstContentfulPaint()
    };
  }
  
  // 发送性能数据
  private sendPerformanceData(data: any): void {
    // 实际项目中可以发送到监控系统
    console.log('Performance Data:', data);
  }
  
  // 获取首次内容绘制
  private getFirstContentfulPaint(): number {
    const paintEntries = performance.getEntriesByType('paint');
    const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
    return fcpEntry ? fcpEntry.startTime : 0;
  }
}

// 初始化性能监控
PerformanceMonitor.getInstance().observePageLoad();

前端工程化工具链推荐 ​

开发工具 ​

  • VS Code：功能强大的代码编辑器
  • WebStorm：JetBrains 出品的 Web IDE
  • Vite：新一代前端构建工具
  • Webpack：成熟的模块打包工具

代码质量工具 ​

  • ESLint：JavaScript 代码质量检查工具
  • Prettier：代码格式化工具
  • Stylelint：CSS 代码检查工具
  • Commitlint：提交信息检查工具

测试工具 ​

  • Jest：JavaScript 测试框架
  • Vue Test Utils：Vue 组件测试工具
  • Cypress：端到端测试框架
  • Playwright：现代 E2E 测试工具

CI/CD 工具 ​

  • GitHub Actions：GitHub 原生 CI/CD 服务
  • Jenkins：开源自动化服务器
  • GitLab CI：GitLab 集成的 CI/CD 工具

总结 ​

前端工程化是一个系统性工程，需要从代码规范、构建优化、测试策略、自动化部署和性能监控等多个维度进行规划和实施。良好的工程化实践可以显著提高开发效率、代码质量和项目可维护性，为团队协作和项目长期发展奠定坚实基础。

继续探索前端工程化的更多实践，构建高效、稳定的前端开发流程！

Copyright © 2024-present Kerwin Wu