前端开发中的缓存机制与模块化实践
ETag：高效资源缓存的实现机制
ETag（实体标签）是HTTP 1.1中用于验证资源是否发生变化的重要标识。当服务器响应一个资源时，会附带一个唯一的ETag值，通常是基于内容生成的哈希值。客户端在后续请求中通过If-None-Match头携带该值，服务器对比后决定是否返回新内容。
- 若ETag一致，返回
304 Not Modified，客户端复用本地缓存。 - 若不一致，返回完整资源及新的ETag。
此外，配合If-Match头可实现乐观锁机制，防止并发修改冲突。例如，若资源已被其他用户更新，服务器将返回412 Precondition Failed，确保数据一致性。
JavaScript模块加载方式对比
现代前端开发中，模块加载方式主要有两种：
- ESM（type="module"）：原生支持的模块系统，允许使用
import和export语法。脚本默认延迟执行，直到文档解析完成。适用于现代浏览器，但需通过构建工具兼容旧环境。 - UMD（Universal Module Definition）：兼容CommonJS、AMD和全局变量的通用模块格式。可通过
<script>标签直接引入，适合跨平台使用，但代码结构更复杂。
选择建议：新项目优先采用ESM；需要广泛兼容性时使用UMD或构建工具转换。
Vue 3 国际化配置方案
通过vue-i18n@next插件实现多语言支持。示例配置如下：
// i18n.js
import { createI18n } from 'vue-i18n'
const locales = {
en: { greeting: 'Hello World' },
zh: { greeting: '你好，世界' }
}
const i18n = createI18n({
locale: 'en',
messages: locales
})
export default i18n
在应用入口中挂载：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'
createApp(App).use(i18n).mount('#app')
组件内调用：{{ $t('greeting') }}，动态切换语言：this.$i18n.locale = 'zh'。
Vue 实例生命周期钩子详解
Vue实例的生命周期由一系列钩子函数控制，用于在特定阶段执行逻辑：
beforeCreate：实例初始化后，数据观测前。created：实例创建完成，数据和方法已配置，但未挂载。beforeMount：虚拟DOM渲染前。mounted：DOM挂载完成，可访问$el。beforeUpdate：数据更新前，可调整状态。updated：DOM更新完成后。beforeUnmount：实例卸载前（Vue 3改名）。unmounted：实例完全销毁，事件监听移除。
Vite 与 Webpack 核心差异分析
| 特性 | Vite | Webpack |
|---|---|---|
| 构建速度 | 极快（基于ESBuild并行编译） | 较慢（全量打包） |
| 开发模式 | 按需编译，热更新瞬时响应 | 需完整打包后热更新 |
| 插件系统 | 简洁，基于Rollup设计 | 功能强大但复杂 |
| 配置复杂度 | 轻量，开箱即用 | 高度可定制但学习成本高 |
| 兼容性 | 依赖现代浏览器原生ESM | 支持老旧环境 |
| 体积 | 更小，更轻量 | 较大 |
| 框架集成 | 内置对Vue支持 | 需额外配置 |
ESM 模块系统核心特性
ES Modules（ESM）是标准的模块化方案，具有以下特点：
- 静态导入/导出：必须在顶层声明，支持编译期分析。
- 支持树摇（Tree Shaking）：可剔除未使用的代码。
- 异步加载能力：可通过
import()动态加载模块。 - 循环依赖处理：可正确解析模块间的相互引用。
- 默认导出与命名导出并存。
当前主流工具链（Babel、Vite、Rollup等）均全面支持ESM，是现代前端开发的标准。
