前端工程化与打包构建
前端工程化是把“个人手艺”变成“工业流水线”：规范（ESLint / Stylelint / Prettier / husky + lint-staged 预提交钩子）、模块化（ESM）、构建（Webpack / Vite / Rollup / esbuild）、CI/CD（GitLab CI / GitHub Actions：lint → test → build → 部署）、质量（单元测试 Vitest / Jest、E2E Playwright）。构建工具的核心动作是：依赖收集 → 编译转换（TS / JSX / SCSS → 浏览器认识的代码） → 压缩混淆 → 代码分割（按需加载） → 长缓存（文件名哈希）。
面试爱问 Webpack vs Vite：Webpack 打包慢因为要“先编完再启动”；Vite dev 用浏览器原生 ESM 按需编译，启动近秒开，prod 用 Rollup 打包。追问会到 Tree Shaking（依赖 ESM 静态分析，import 的才打进包）、Babel（语法转换：箭头函数 / 可选链降级）、polyfill（core-js 按需注入）。
- 工程化五件套：规范 + 模块化 + 构建 + CI/CD + 测试
- 构建核心：依赖收集 → 编译 → 压缩 → 分割 → 哈希缓存
- Vite dev 快于 Webpack 的本质：浏览器原生 ESM 按需编译 vs 全量打包
JS
// Node 侧演示构建产物优化点（概念性 demo） const { build } = require("vite"); // vite.config.js：生产构建三件套 const config = { build: { target: "es2018", // 语法降级目标 minify: "esbuild", // 压缩（比 terser 快一个量级） rollupOptions: { output: { // 代码分割：第三方单独成包，利用长缓存 manualChunks: { vendor: ["vue", "vue-router", "pinia"], }, // 入口文件之外的资源都带哈希：[name].[hash].js entryFileNames: "assets/[name].[hash].js", chunkFileNames: "assets/[name].[hash].js", }, }, }, }; // Tree Shaking 原理演示：只 import 用到的 // import { debounce } from "lodash-es"; // ✓ 按需引入，摇掉其余 // import _ from "lodash"; // ✗ 整包进来 // 预提交钩子（package.json） /* "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,ts,vue}": ["eslint --fix", "prettier --write"] } */ console.log("npm run lint -> eslint ."); console.log("npm run test -> vitest"); console.log("npm run build -> vite build"); console.log("CI: lint -> test -> build -> deploy");
本节要点工程化 = 规范 + 构建 + 流水线 + 测试；Vite 秒开的本质是浏览器原生 ESM 按需编译；缓存策略靠文件名哈希。
