前端工程化通过模块组织、开发工具、构建、测试和发布流程，使前端应用能够持续交付和维护。工程方案应解释实际解决的问题及其成本。
开发与生产构建
开发服务器通常重视快速启动、按需转换和热更新；生产构建则需要输出适合部署的资源。Vite 利用浏览器原生 ESM 等能力组织开发流程，但具体依赖处理和构建实现会随版本变化，不能把某个内部打包器名称当成永久定义。
源码可运行不代表生产资源路径、路由回退、缓存和代码分包都正确。应检查实际构建产物及部署环境。
参考：Vite 官方功能文档。
Tree Shaking 与分包
Tree Shaking 依赖可静态分析的模块关系以及副作用信息等条件。ES module 有助于静态分析，但使用 ESM 不意味着所有未调用代码都必然被删除。错误的 sideEffects 标记可能丢掉必要的样式导入或初始化逻辑。
动态 import 可作为延迟加载边界。分包需要平衡首屏资源、重复依赖和后续请求开销；过细分包可能增加请求与依赖链等待。
参考：webpack 官方 Tree Shaking 文档。
环境变量
注入客户端代码的环境变量最终可被用户获取，不应用于保存密钥。以 Vite 为例，符合暴露规则的变量经 import.meta.env 进入客户端；前缀是暴露约定，不是加密机制。模式与 NODE_ENV 也不是同一个概念。
参考：Vite 官方环境变量与模式文档。
测试层次
单元测试适合独立逻辑，组件测试验证组件输入、交互与输出，端到端测试覆盖真实浏览器中的关键用户流程。应按失败风险选择层次，避免只检查内部函数调用而漏掉用户行为。
组件测试应覆盖加载、空结果、错误、重试与关键交互；模拟网络或计时器时，也要保留少量能验证真实集成的测试。覆盖率不能独立证明质量。
参考：Vue 官方测试指南。
端到端测试优先使用角色、名称等面向用户的定位方式，等待可观察条件，避免用固定 sleep 掩盖竞态。测试数据和会话应隔离，降低测试之间互相影响。
发布与故障定位
以下为工程实践建议：发布应能关联源码版本、构建产物与错误监控；资源采用内容哈希时，保留合理的旧文件兼容期。白屏先检查入口 HTML、静态资源、运行时异常、路由与接口，不要直接把原因归结为缓存。
项目技术复盘应说明触发条件、定位证据、方案取舍和验证结果。性能或稳定性提升需注明环境、指标与样本，不能把构建成功当作线上行为验证。