一次真实项目的重构启示

2023年接手一个老项目：Vue2 + Webpack 4，本地启动要2分15秒，HMR更新一次等10秒。团队成员不敢改全局样式，因为一个CSS修改会导致全量重新编译。更糟的是，线上包体积达到1.8MB（gzip后480KB），首屏加载白屏3秒以上。

我决定重构，但工程化涉及面太广：构建工具、模块化、代码规范、性能监控、自动化部署……光靠百度碎片知识根本没法落地。于是自费购买了极客时间《前端工程化精讲》和慕课网《Webpack/Vite实战：从入门到生产》，边学边改。

4周后：本地启动降至300ms，HMR 50ms以内，包体积压到280KB（gzip后95KB），首屏1.2秒。这篇文章不吹不黑，只凭真实数据对比这两套教程的差异，并给出可直接复用的工程化模板代码。

问题：前端工程化的四大痛点

• 构建慢：Webpack项目超过500个模块的增量编译普遍在3秒以上，开发体验差。
• 代码质量不可控：无ESLint/Prettier规范，代码风格乱，Bug率高。
• 包体积膨胀：按需加载、Tree Shaking、代码分割未落实，首屏加载慢如蜗牛。
• 部署流程黑盒：无CI/CD，手动打包上传，经常出现“我机器上能跑”的窘境。

方案对比：两大教程谁更适合你？

我花了两周时间完整学完两门课，从内容深度、实用性、坑点覆盖三个维度做了对比。

教程A：极客时间《前端工程化精讲》

讲师：程柳锋，时任阿里架构师，React/Node双栈。课程82讲，约30小时。核心章节：

• 模块化演进（CommonJS/ESM/AMD）
• 构建工具内幕（Webpack/Vite/Rollup原理）
• 代码规范体系（ESLint/Prettier/Commitlint）
• 前端性能工程化（Chunk分割/Lazy Loading/CDN）
• 自动化部署（GitLab CI/Docker/Pm2）

教程B：慕课网《Webpack/Vite实战：从入门到生产》

讲师：吴大木，一线大厂前端Leader。课程40讲，约12小时。核心章节：

• Webpack5核心配置（Loader/Plugin/lazy Loading）
• Vite3/4实战迁移（从Webpack到Vite）
• 打包性能调优（缓存/多进程/Terser）
• 生产环境配置（环境变量/SSR/微前端兼容）

对比数据

如果你的目的是快速解决现有项目的构建痛点，教程B更高效；如果你想从根本理解工程化全局，教程A更扎实。我建议两者结合：先看B把Webpack/Vite跑起来，再读A补充理论，时间比约1:3。

完整代码实现：工程化模板（Vite + Vue3 + ESLint + CI）

下面是按照教程内容搭建的生产级工程模板，你可以在任何新项目中直接使用。

1. 项目结构与初始化

# 使用Vite创建Vue3+TS项目
npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
# 安装核心依赖
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-vue vue-eslint-parser

2. ESLint配置（.eslintrc.cjs）

module.exports = {
  root: true,
  env: { browser: true, es2021: true, node: true },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  globals: { defineProps: 'readonly', defineEmits: 'readonly' },
};

3. Vite配置（vite.config.ts）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  build: {
    target: 'es2020',
    outDir: 'dist',
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 将 node_modules 拆分为 vendor chunk
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },
  server: {
    port: 3000,
    open: true,
    hmr: { overlay: true },
  },
  // 开启 CSS 代码分割
  css: {
    modules: { localsConvention: 'camelCase' },
    preprocessorOptions: {
      scss: { additionalData: `@import "@/styles/variables.scss";` },
    },
  },
});

4. CI/CD流水线（.gitlab-ci.yml）

image: node:18-alpine

stages:
  - lint
  - build
  - deploy

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/

lint:
  stage: lint
  script:
    - npm ci
    - npm run lint
  only:
    - merge_requests

build:
  stage: build
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 week
  only:
    - main

deploy:
  stage: deploy
  image: alpine:latest
  script:
    - apk add --no-cache rsync openssh
    - rsync -avz --delete dist/ deploy@server:/var/www/project/
  only:
    - main
  when: manual

5. 性能分析脚本（measure.mjs）

// 使用 Node.js 内置模块测量构建耗时
import { performance } from 'perf_hooks';
import { execSync } from 'child_process';

const start = performance.now();
console.log('Building...');
execSync('npm run build', { stdio: 'inherit' });
const end = performance.now();
const duration = ((end - start) / 1000).toFixed(2);
console.log(`\nBuild completed in ${duration}s`);
// 输出包体积
import fs from 'fs';
function getDirSize(dir) {
  let size = 0;
  fs.readdirSync(dir).forEach(file => {
    const path = `${dir}/${file}`;
    const stat = fs.statSync(path);
    if (stat.isFile()) size += stat.size;
    else if (stat.isDirectory()) size += getDirSize(path);
  });
  return size;
}
const totalBytes = getDirSize('dist');
console.log(`Total output size: ${(totalBytes / 1024).toFixed(2)} KB`);

效果数据：重构前后对比

数据来源：同一台MacBook Pro M1 16G，相同网络环境，使用Lighthouse 10、Chrome DevTools Performance面板、以及自定义Node脚本。

避坑指南（我踩过的8个坑）

• 坑1：Vite在Windows上路径大小写 – 大小写敏感导致import 'Components/Button.vue' 和 'components/Button.vue' 不一致，Linux构建直接报错。解决方案：统一使用小写路径，在ESLint中添加 'unicorn/filename-case' 规则。
• 坑2：CSS Modules与Vite的冲突 – 某个组件用了CSS Modules，但Vite默认开启css.modules，导致样式混乱。处理方式：只对.module.css启用模块化，其余视为全局：css.modules: { localsConvention: 'camelCaseOnly', generateScopedName: '[local]__[hash:base64:5]' }，并且在组件内明确导入。
• 坑3：动态导入与SPA路由按需加载 – 直接用React.lazy + Suspense没问题，但Vue3中如果用旧版Vuex会破坏按需加载。解决方案：升级Vuex到4.x或改用Pinia，并且确保路由配置使用函数形式。
• 坑4：CI中npm ci比npm install慢 – 原因是lockfile版本不一致。刚开始用npm ci时因为package-lock.json包含开发机上的平台相关依赖，导致CI重新下载。最佳实践：在CI中先执行npm cache clean --force，然后npm ci --prefer-offline。
• 坑5：Tree Shaking对副作用无效 – 在Vite中使用rollup-plugin-visualizer发现有些组件未摇掉，因为import有副作用。解决办法：在package.json中添加"sideEffects": ["*.css", "*.vue"]，并且避免在模块顶层执行函数。
• 坑6：ESLint与Prettier冲突 – 格式化规则不一致导致开发者频繁冲突。直接在根目录创建.prettierrc，并与eslint-config-prettier配合，删除其它冲突插件。
• 坑7：多环境变量管理混乱 – 使用.env.development、.env.production等文件，但忘记在CI中注入VITE_前缀变量，导致环境变量全部为undefined。解决方案：在GitLab CI的variables区显式声明关键变量，并在构建脚本中验证。
• 坑8：SOVN路径兼容性 – 有组件使用深相对路径../../../utils，迁移到Vite后alias配置不完善，导致破坏。最终使用resolve.alias统一配置，并且禁止相对路径超过两级。

总结：如何选择并落地

如果你只有一周时间，建议：

• 第一天：用教程B的Vite迁移章节，把现有Webpack项目转成Vite（重点看loader替换、hot reload配置）。
• 第二天：用上面的模板配置ESLint + Prettier + Git Hooks（husky + lint-staged）。
• 第三天：学习教程A的代码拆分模块，用rollup-plugin-visualizer分析包体积，做按需加载。
• 第四天：按照教程A的CI章节，搭建GitLab CI流水线（包括lint、build、deploy）。
• 第五天：压力测试 + 性能优化收尾。
• 第六-七天：复盘总结，写团队文档。

最终效果：开发效率提升5倍，生产错误减少70%。

避坑（额外）

写这篇文章时，我又发现一个坑：ESLint的vue/multi-word-component-names规则默认要求组件名必须多单词，但实际很多项目用单文件组件（如index.vue）作为页面入口。解决方案：在规则中设置为'off'，并且要求路由文件统一命名规范。

另外，CI中使用rsync时，如果目录权限不足，需要提前在服务器上创建目标目录并赋予合适的用户组。我在第一次部署时，因为ssh key设置不对，耗费了整整半天。记住：每次修改CI配置后，先跑一遍dry-run验证。

最后，如果你正在选择教程，我的建议是：先购买极客时间的《前端工程化精讲》作为知识体系，再找慕课网的《Webpack/Vite实战》作为动手指南。总投入约200元，但节省的时间成本远超这个数字。