主题
前端开发：工程化与工具
一、构建工具
| 英文 | 中文 | 说明 | 发音 |
|---|---|---|---|
| Bundler | 打包器 | webpack、rollup、parcel | /ˈbʌndlər/ |
| Transpiler | 转译器 | Babel、esbuild、swc，语法降级 | /trænˈspaɪlər/ |
| Minifier | 压缩器 | terser、uglify，压缩代码减小体积 | /ˈmɪnɪfaɪər/ |
| Compressor | 压缩器 | gzip / brotli，网络传输压缩 | /kəmˈpresər/ |
| Watch Mode | 监听模式 | 文件变化自动重新构建 | |
| Hot Reload / HMR | 热模块替换 | 改代码浏览器实时更新，不刷新 | |
| Tree Shaking | 摇树 | 剔除未使用的代码（依赖 ESM） | |
| Code Splitting | 代码分割 | 按路由/模块分包，首屏更小 | |
| Preloading | 预加载 | <link rel="preload">，提前加载关键资源 | |
| Prefetching | 预获取 | <link rel="prefetch">，加载可能用到的资源 | |
| Polyfill | 兼容补丁 | 给老浏览器补现代 API | /ˈpɒliːfɪl/ |
| PostCSS | CSS 后处理 | autoprefixer、px-to-rem | /poʊst siː siː es/ |
| Linter | 代码检查 | ESLint、Stylelint、Markdownlint | |
| Formatter | 格式化 | Prettier、EditorConfig | |
| Scaffold | 脚手架 | create-vite、vue-cli、create-react-app | /ˈskæfəld/ |
二、包管理与依赖
| 英文 | 中文 | 说明 | 发音 |
|---|---|---|---|
| NPM | Node 包管理器 | node_modules、package.json | |
| Yarn | Yarn 包管理器 | 比 npm 更快的替代方案 | |
| PNPM | 高性能包管理 | 硬链接 + 软链接，节省空间 | |
| Dependency | 依赖 | package.json 里的 dependencies | /dɪˈpendənsi/ |
| DevDependency | 开发依赖 | devDependencies，只在开发时用 | /dev dɪˈpendənsi/ |
| PeerDependency | 对等依赖 | 需要宿主项目安装 | /pɪr dɪˈpendənsi/ |
| OptionalDependency | 可选依赖 | 安装失败不阻塞 | /ˈɒpʃənl dɪˈpendənsi/ |
| Lockfile | 锁文件 | package-lock.json / yarn.lock / pnpm-lock.yaml | |
| SemVer | 语义化版本 | Major.Minor.Patch，^ / ~ / >= | /ˌsemˈvɜːʃn/ |
| Outdated | 过时包 | npm outdated，提示可升级的依赖 | |
| Vulnerability | 漏洞 | npm audit 检查依赖安全漏洞 | /ˌvʌlnərəˈbɪləti/ |
| Monorepo | 单仓多项目 | Turborepo / Nx / pnpm workspace | /ˌmɒnoʊˈriːpoʊ/ |
| Workspace | 工作区 | pnpm workspace，多包管理 |
三、CSS 与样式
| 英文 | 中文 | 说明 | 发音 |
|---|---|---|---|
| Sass / SCSS | CSS 预处理器 | 变量、嵌套、mixin、继承 | /sæs/ |
| Less | CSS 预处理器 | 另一种预处理器 | /les/ |
| Tailwind CSS | 原子化 CSS | 实用优先，按需生成 | /ˈteɪlwɪnd/ |
| CSS Modules | CSS 模块 | 作用域样式，避免冲突 | |
| CSS-in-JS | JS 写样式 | styled-components、emotion | |
| Styled Component | 样式组件 | JS 里写 CSS，组件化 | |
| BEM | 块元素修饰 | Block.Element--Modifier，命名规范 | /bem/ |
| Mobile First | 移动优先 | 先做移动端，用 media query 扩展 | |
| Responsive Design | 响应式设计 | 一套代码适配多端 | |
| Breakpoint | 断点 | 响应式切换的宽度阈值 | |
| Media Query | 媒体查询 | @media (max-width: 768px) | /ˈmiːdiə ˈkwɪəri/ |
| Fluid Typography | 流式排版 | clamp() 让字号自适应 | |
| CSS Reset | 样式重置 | 消除浏览器默认样式差异 | |
| Normalize | 样式归一化 | 比 reset 温和，保留合理默认 | /ˈnɔːrməlaɪz/ |
| Critical CSS | 关键 CSS | 首屏必须的内联 CSS，加速首绘 |
四、浏览器 API 与概念
| 英文 | 中文 | 说明 | 发音 |
|---|---|---|---|
| DOM | 文档对象模型 | Document Object Model，HTML 树结构 | |
| BOM | 浏览器对象模型 | Browser Object Model，window/navigator | /biː oʊ em/ |
| Virtual DOM | 虚拟 DOM | JS 模拟 DOM，diff 后更新 | |
| Shadow DOM | 影子 DOM | Web Components 样式隔离 | /ˈʃædoʊ dɒm/ |
| Web Components | Web 组件 | custom element + shadow DOM + template | /web kəmˈpoʊnənts/ |
| Custom Element | 自定义元素 | <my-component> 自定义 HTML 标签 | /ˈkʌstəm ˈelɪmənt/ |
| Template Tag | 模板标签 | <template>，惰性克隆模板 | |
| Slot Tag | 插槽标签 | <slot>，内容分发 | |
| HTML5 API | HTML5 API | fetch、video、canvas、localStorage | |
| Fetch API | 获取 API | 现代网络请求，替代 XMLHttpRequest | |
| XMLHttpRequest | XHR | 老式网络请求 | |
| Promise | 承诺 | async/await 的基础 | |
| Service Worker | 服务工作线程 | PWA 离线缓存、请求拦截 | /ˈsɜːrvɪs ˈwɜːrkər/ |
| Web Worker | Web 工作线程 | 后台计算，不阻塞主线程 | /web ˈwɜːrkər/ |
| WebSocket | Web 套接字 | 实时双向通信 | /web ˈsɒkɪt/ |
| WebRTC | Web 实时通信 | 音视频通话、数据传输 | /web ɑːr tiː siː/ |
| Canvas | 画布 | 2D / WebGL 绘图 | |
| WebGL | Web 图形库 | OpenGL ES，3D 渲染 | |
| Intersection Observer | 交叉观察器 | 元素进入视口时触发 | /ˌɪntərˈsekʃn əbˈzɜːvər/ |
| Resize Observer | 尺寸观察器 | 元素尺寸变化时触发 | /ˈriːzaɪz əbˈzɜːvər/ |
| Mutation Observer | 变化观察器 | DOM 变化时触发 | /mjuˈteɪʃn əbˈzɜːvər/ |
| Performance Observer | 性能观察器 | 性能指标监控 | /pərˈfɔːrməns əbˈzɜːvər/ |
| Local Storage | 本地存储 | 5MB，持久化 | |
| Session Storage | 会话存储 | 标签页级，关闭即清 | |
| IndexedDB | 索引数据库 | 浏览器内 NoSQL 数据库 | |
| Cookie | Cookie | 小数据，每次请求自动带 | |
| Application Cache | 应用缓存 | 已废弃，用 Service Worker 替代 | |
| PWA | 渐进式 Web 应用 | 可安装到桌面，离线可用 | |
| Manifest | 清单 | manifest.json，PWA 元信息 | |
| Icon Font | 图标字体 | 字体图标 | |
| SVG | 矢量图形 | Scalable Vector Graphics | |
| Icon Component | 图标组件 | 组件化图标封装 |
五、测试与质量
| 英文 | 中文 | 说明 | 发音 |
|---|---|---|---|
| Unit Test | 单元测试 | Jest、Vitest | |
| Component Test | 组件测试 | Vue Test Utils、React Testing Library | |
| Snapshot Test | 快照测试 | 对比输出和上次快照是否一致 | |
| E2E Test | 端到端测试 | Cypress、Playwright、Puppeteer | |
| Visual Regression | 视觉回归测试 | Percy、BackstopJS，对比截图 | |
| Code Coverage | 代码覆盖率 | 行覆盖、分支覆盖 | |
| Lighthouse | 灯塔 | Google 性能/可访问性/SEO 评分 | /ˈlaɪthaʊs/ |
| Bundle Analyzer | 包分析器 | webpack-bundle-analyzer，看包结构 | |
| Performance Budget | 性能预算 | 限制首屏包体积/加载时间 | |
| Core Web Vitals | 核心 Web 指标 | LCP / FID / CLS | /kɔːr web ˈvaɪtlz/ |
| LCP | 最大内容绘制 | Largest Contentful Paint，< 2.5s 为优 | /el siː piː/ |
| FID | 首次输入延迟 | First Input Delay，< 100ms 为优 | /ef aɪ diː/ |
| CLS | 累积布局偏移 | Cumulative Layout Shift，< 0.1 为优 | /siː el es/ |
| TTI | 可交互时间 | Time to Interactive | /tiː tiː aɪ/ |
| TBT | 总阻塞时间 | Total Blocking Time | /tiː biː tiː/ |
| FCP | 首次内容绘制 | First Contentful Paint | /ef siː piː/ |
| TTFB | 首字节时间 | Time to First Byte | /tiː tiː ef biː/ |
| TCO | 总完成时间 | Time to Consistently Interactive |
六、开发调试表达
| 英文 | 中文 | 说明 | 发音 |
|---|---|---|---|
| Reproduce | 复现 | 能稳定复现 bug 的步骤 | |
| Reproduction | 重现案例 | 最小化复现仓库/codepen | |
| Stack Trace | 堆栈追踪 | 报错时的调用链，看最上面第一行 | |
| Breakpoint | 断点 | 调试时暂停执行的位置 | |
| Step Over | 单步跳过 | 不进入函数 | |
| Step Into | 单步进入 | 进入函数内部 | |
| Step Out | 跳出 | 跳到上一级调用 | |
| Watch | 监视 | 调试时实时看变量值 | |
| Console Log | 日志输出 | console.log / console.warn / console.error | |
| Break On Exception | 异常时断住 | DevTools 自动停在异常处 | |
| Source Map | 源码映射 | 压缩代码还原原始源码位置 | |
| DevTools | 开发者工具 | Chrome DevTools、Vue DevTools | |
| Extension | 扩展 | Chrome 扩展、VS Code 扩展 | |
| Hot Fix / Patch | 热补丁 / 补丁 | 紧急修复 | |
| Workaround | 临时解法 | 问题根治前的绕过方案 | |
| Regression | 回归 | 改 A 导致 B 出问题 | |
| Side Effect | 副作用 | 修改了不该改的东西 | |
| Race Condition | 竞态 | 多操作竞争导致的不一致 | |
| Memory Leak | 内存泄漏 | 不用的内存没释放 | |
| Performance Issue | 性能问题 | 卡顿、加载慢等 | |
| Bottleneck | 性能瓶颈 | 系统最慢的环节 |
七、常用缩写
| 缩写 | 全称 | 中文 | 发音 |
|---|---|---|---|
| SPA | Single Page Application | 单页应用 | /es piː eɪ/ |
| MPA | Multi Page Application | 多页应用 | /em piː eɪ/ |
| SSR | Server-Side Rendering | 服务端渲染 | /es es ɑːr/ |
| SSG | Static Site Generation | 静态站点生成 | /es es dʒiː/ |
| ISR | Incremental Static Regeneration | 增量静态再生 | /aɪ es ɑːr/ |
| CSR | Client-Side Rendering | 客户端渲染 | /siː es ɑːr/ |
| PWA | Progressive Web App | 渐进式 Web 应用 | /piː viː eɪ/ |
| TWA | Trusted Web Activity | 可信 Web 活动 | |
| IWA | Installable Web App | 可安装 Web 应用 | |
| FOUC | Flash of Unstyled Content | 样式闪烁 | |
| FOUIT | Flash of Unstyled Image Text | 图片文字闪烁 | |
| FOUC | Flash of Original Content | 原始内容闪现 | |
| BEM | Block.Element--Modifier | CSS 命名规范 | |
| OOCSS | Object-Oriented CSS | 面向对象 CSS | |
| SMACSS | Scalable & Modular CSS | 可扩展模块化 CSS | |
| ITCSS | Inverted Triangle CSS | 三角形 CSS 架构 | |
| A11Y | Accessibility | 可访问性 | /eɪ ˈlevn/ |
| SEO | Search Engine Optimization | 搜索引擎优化 | |
| SEM | Search Engine Marketing | 搜索引擎营销 | |
| CDN | Content Delivery Network | 内容分发网络 | |
| DNS | Domain Name System | 域名系统 | |
| SSL | Secure Sockets Layer | 安全套接层 | |
| TLS | Transport Layer Security | 传输层安全 | |
| HTTP/2 | Hypertext Transfer Protocol 2 | 下一代 HTTP | |
| HTTP/3 | Hypertext Transfer Protocol 3 | QUIC 上的 HTTP | |
| HTTPS | HTTP Secure | 加密的 HTTP | |
| W3C | World Wide Web Consortium | 万维网联盟 | /dʌbəljuː θriː siː/ |
| WHATWG | Web Hypertext Application Technology Working Group | Web 标准工作组 | /wɒt diː dʒiː/ |
| TC39 | Technical Committee 39 | JS 标准委员会 | /tiː siː θriː naɪn/ |
| ECMAScript / ES | ECMAScript | JS 语言标准 | /ˈekmoʊ skrɪpt/ |
| ES5 / ES6 / ES2015 | ECMAScript 版本 | ES5（老）、ES6/ES2015（现代） | /es faɪv/ /es sɪks/ |
| ESM | ECMAScript Module | 原生模块（import/export） | /iː es em/ |
| CJS | CommonJS | Node.js 模块（require/module.exports） | /siː dʒiː es/ |
| UMD | Universal Module Definition | 通用模块定义 | /juː em diː/ |
| AMD | Asynchronous Module Definition | 异步模块定义（require.js） | /eɪ em diː/ |