前端

本文整理 Vite 学习路径：从核心原理与最小项目起步，逐层深入配置体系、环境变量、插件开发、按需加载、生产构建优化与部署策略，最后给出与 Webpack 的对比选型、常见问题。

• 适用场景：Web / SPA / 微前端 / Electron 渲染层的现代构建
• 技术栈：Vite 7.x，框架无关（Vue / React / Svelte 等均可接入）
• 目标：开发极速、配置简洁、生产可控、迁移平滑

本文整理一条可落地的 Webpack 学习路径：从核心概念与最小配置起步，逐层深入 Loader、Plugin、模块解析、构建性能、产物优化、多环境配置、模块联邦，最后给出迁移建议、常见问题。

• 适用场景：Web / SPA / 微前端 / Electron 渲染层的工程化构建
• 技术栈：Webpack 5，框架无关（Vue / React 均可接入）
• 目标：构建可配置、可优化、可维护、可迁移

本文整理一条可落地的 Electron 学习路径：从进程模型与最小项目起步，逐层深入 IPC 安全、工程化、原生能力、性能与体积优化、打包分发。

• 适用场景：Web 开发者转型桌面端、内部工具、跨平台客户端
• 技术栈：TypeScript / 现代前端框架（Vue / React 均可接入）
• 目标：应用能跑、能稳、能小、能发、能维护

本文覆盖 TypeScript 的类型系统、语法、编译配置与工程实践，可作为学习与查漏的参考。

• 适用读者：会 JavaScript、想系统掌握类型系统的开发者
• 环境：Node.js 20+、TypeScript 5.x
• 阅读方式：前六节是基础，第七到第十节是类型进阶，第十一、十二节是工程配置

本文整理一套可落地的前端埋点（数据采集）方案：埋点类型与选型、事件模型与命名规范、SDK 设计（采集、队列、上报、降级）、自动埋点实现、隐私合规、数据治理与验收，最后给出方案对比与常见问题。

• 适用场景：Web / SPA / 微前端 / Electron 渲染层的数据采集
• 技术栈：TypeScript，框架无关（Vue / React 均可接入）
• 目标：埋点不丢、不重、可解释、可演进

本文按"组件 → 状态 → 副作用 → 性能 → 路由与状态管理 → 工程化"的顺序整理 React 的核心用法，示例基于 React 18/19 + 函数组件 + Hooks。

• 环境：React 18.2+ / 19、Vite 5+、Node 20+
• 示例默认 TypeScript 与 JSX
• 说明：React 19 的部分能力（use、Actions、ref 作为普通 prop）在文中单独标注

本文按"模板 → 响应式 → 组件 → 路由与状态 → 工程化与性能"的顺序整理 Vue 3 的核心用法，示例基于组合式 API 与 <script setup>。

• 环境：Vue 3.4+、Vite 5+、Node 20+
• 示例使用 Vue 3 + TypeScript 可选；纯 JS 同样适用
• 说明：Vue 3.5 起新增 useTemplateRef、props 解构保持响应性等能力，文中标注了版本

本文按"语法 → 对象与函数 → 异步 → 模块与浏览器 → 工程实践"的顺序整理 JavaScript 的核心知识，可作为系统学习与查漏的参考。

• 环境：Node.js 20+、现代浏览器（ES2020+）
• 示例可直接在浏览器控制台或 node 中运行
• 约定：文中"现代写法"指 ES2015 之后的语法

本文覆盖微前端的适用场景、核心概念，以及 qiankun、micro-app、无界（wujie）三个方案的基础使用、渲染机制、沙箱、路由与通信，最后给出横向对比与选型建议。

• 版本基线：qiankun 2.x、micro-app 1.x、无界 1.x（API 会随版本变化，落地前以官方文档为准）
• 示例栈：Vue 3 + Vite / React 18 + Vite，主应用为 history 路由
• 说明：三个方案都在快速演进，本文侧重"原理与用法共性"，具体选项以对应版本文档为准

在使用 el-select 组件处理大量数据时，可能会遇到性能问题，如页面响应慢、滚动卡顿等。为了解决这些问题，可以通过引入虚拟列表技术对 el-select 进行优化。

一句话记住分工：EditorConfig 管编辑器默认值，Prettier 管排版，ESLint / Stylelint 管质量，husky 管"什么时候跑"，lint-staged 管"只跑改动的文件"，commitlint 管"提交信息写没写对"。

node -v   # 需要 ≥ 18（commitlint 19 要求 Node 18+）
npm -v    # 需要 ≥ 9
git --version  # 需要 ≥ 2.13

# 1）项目必须是 git 仓库，且已配置远端
git init
git remote add origin <你的仓库地址>

# 2）只保留一种包管理器的锁文件
#    示例工程的 vite-project 里同时存在 package-lock.json 和 yarn.lock，
#    实际项目请删掉不用的那个，否则不同人装出不同依赖树

WASM是一种虚拟指令集体系架构，设计用于将C、C++、Rust等低级语言编译成可在现代网络浏览器中运行的二进制格式。它的主要目标是提高网页应用的性能，使这些应用能够接近或达到原生应用的运行速度，wasm是2015年由Mozilla提出的一…

Monorepo 是一种强大的代码管理方式，适合需要高代码复用性和协作效率的多项目场景。通过选择合适的工具，可以有效解决依赖管理、构建性能和版本控制等问题，从而提升开发体验和团队效率。

PWA（Progressive Web App，渐进式 Web 应用）不是一项技术，而是一组 Web 能力的组合。常见的说法是：这个词由 Alex Russell 和 Frances Berriman 在 2015 年提出，2016 年 Google I/O 之后被大规模推广（很多文章写成"2016 年提出"）。它的核心主张是：用 Web 技术做出接近原生应用的体验，包括离线可用、桌面图标、全屏运行、消息推送、后台同步。

// main.js（页面主线程），等 load 之后再注册，避免和首屏抢带宽
if ("serviceWorker" in navigator) {
	window.addEventListener("load", () => {
		navigator.serviceWorker
			.register("/service-worker.js", { scope: "/" })
			.then(registration => {
				console.log("SW 注册成功", registration.scope);
			})
			.catch(error => {
				console.error("SW 注册失败", error);
			});
	});
}