365天前端知识体系构建计划：从入门到架构师的完整进阶之路

前言 前端工具链的“内卷”从未停止。Webpack多年霸主，几乎成了“打包”的代名词。但Vite横空出世，以“快”为刀，砍向Webpack的软肋：开发服务器启动慢、热更新慢。 两者没有绝对好坏，只有合

你在本地npm run dev，页面秒开，爽得不行。一部署到服务器，慢得像老太太过马路，图片加载半天，首屏白屏几秒，用户投诉。

你刚学Next.js，发现获取数据竟然有三种写法：`getStaticProps`、`getServerSideProps`、还有直接在组件里`fetch`。你懵了：我到底该用哪个？

你辛辛苦苦用Create React App做了个网站，上线后却发现：首屏白屏半天，SEO搜不到，用户以为你网站坏了。今天我们来认识Next.js——一个给React“穿衣服”的框架。

你有没有想过：React每次更新，都要对比两棵虚拟DOM树，如果老老实实 O(n³) 地比，你的页面早就卡成化石了。但React只用 O(n) 就搞定了，怎么做到的？

你有没有想过：React组件树很大时，页面为什么会卡？能不能让React干一会儿活，歇一会儿，让浏览器喘口气？Fiber架构就是干这个的。今天我们来扒一扒React的“摸鱼”神器——Fiber

你用Hooks用得很爽，但突然有一天，你在`if`里写了个`useState`，React直接报错。你懵了：凭什么不让写？今天我们就钻进React肚子里，看看Hooks到底是怎么实现的。

你写了个React组件，数据一多，页面卡得跟幻灯片似的。点个按钮，半秒后才响应。用户以为电脑坏了，直接关掉。今天我们就来给React应用“动手术”，5个实战优化技巧，让你的组件重获新生，60帧跑满。

你是不是还在：改完代码，手动打包，然后打开FileZilla，拖拽文件到服务器，再刷新CDN缓存，等5分钟……然后同事说“你刚才上传覆盖了我的代码”？今天我们来搭建一条前端工程化流水线

你刚写了个酷炫的滚动动画，结果一滑，帧率掉到10帧，电脑风扇狂转，用户直接关掉网页。今天我们不聊首屏，专治“运行时卡顿”——滚动、动画、输入框打字都能卡成狗。5招下去，让你的页面像吃了德芙，纵享丝滑。

用户打开你的网站，3秒了还是一片白。他走了，去了隔壁。你丢了一个客户，就因为首屏慢了几秒。今天我们来给页面“提速”，6个实战技巧，从网络请求到渲染，让你的首屏加载快得像闪电。

你是不是经历过：项目写到一半，发现目录乱成毛线，组件互相依赖，改一个地方崩十个地方。想重写？老板说“没时间”。不重写？每天加班改bug。今天我们就来聊聊前端架构

你是不是见过这样的代码：一个文件几千行，一个函数做了十件事，改一个地方崩三个地方。今天我们不背理论，直接用5种前端最常用的设计模式，把你从“面条代码”里捞出来。

你的项目越来越大，每次打包5分钟，启动像蜗牛，团队几十人改同一个代码库，天天合并冲突。想拆？拆成多个独立应用，结果发现：怎么让它们“长”在一起？今天我们来学微前端——一种让多个前端应用像乐高积木一样拼

你写了个页面，本地测试完美，上线后用户却说“点不动”、“白屏”、“数据不见了”。你一脸懵：“我这儿是好的啊！”——这不怪你，因为你没有“天眼”。今天我们来装一双远程眼睛：前端监控。

前言 想象一下，你开了个奶茶店。XSS就是有人在你店里的菜单上贴了一张纸：“凭此券免费喝奶茶”，然后顾客都来找你要免费奶茶。CSRF则是有人冒充你，对供应商说：“老板说再进1000箱珍珠！”结果你莫名

前言 想象你有一个房间（内存）。你不断往里面搬家具（创建对象），但从来不扔（忘记释放）。慢慢的，房间堆满杂物，连门都开不了。这时候你需要一个清洁工，定期把没用的东西清走。 在JavaScript里，这

前言 想象一下，你家客厅要重新装修。你只是换了个抱枕（重绘），很轻松。但如果你要把墙拆了（重排），那得搬家具、砸墙、重新粉刷，累得半死。如果只是把电视画面换个图层（合成），连工人都不要，遥控器一按就行

前言 想象一下，你在网上下单了一个“网页快递”。你填好地址（URL），点击“下单”（回车）。然后，这个订单就开始了它的奇幻漂流：先去DNS“查号台”问路，再去服务器“仓库”取货，中间可能还要过“安检”

前言 想象你去餐厅吃饭，你在菜单上贴了个标签“@少油”，厨房看到后自动给你少放油。你又贴个“@加辣”，厨房又自动加辣。你只需要贴标签，厨房负责执行。 这就是装饰器。它是一种特殊的声明，可以附加在类、方