Category
Frontend
Parcel 详解：零配置构建工具适合什么场景
前言Parcel 的核心卖点是： 零配置，开箱即用。 相比 Webpack 的高度可配置，Parcel 更强调自动识别项目里需要的能力，让开发者尽快跑起来。 Parcel 怎么使用最简单的项目里，可以直接把 HTML 作为入口。 1234567<!DOCTYPE html><html> <body> <div id=...
esbuild 详解：为什么它这么快
前言esbuild 是一个用 Go 编写的 JavaScript / TypeScript 打包和转换工具。 它最常见的定位是： 极快的底层编译能力。 很多现代工具并不是直接让开发者使用 esbuild，而是把它作为底层能力。 比如 Vite 就使用 esbuild 做依赖预构建和开发阶段的快速 transform。 esbuild 能做什么esb...
Vite 详解：为什么开发启动和 HMR 这么快
前言Vite 最大的变化是： 开发环境不先打包。 这和传统 Webpack 开发模式有本质区别。 Vite 快不是单纯因为 esbuild 快，而是因为它改变了开发阶段的架构。 Webpack 开发模式传统打包工具开发时通常要先做完整构建。 1234567891011读取入口 ↓分析所有依赖 ↓执行编译转换 ↓生成开发环境 bundle ↓启动 dev se...
Rollup 详解：为什么它适合打包库
前言Rollup 的定位非常清晰： 生成更干净、更小、更适合分发的 JavaScript 库代码。 Webpack 更像应用构建工具，想处理整个前端工程。 Rollup 更像 ESM 优化器，重点是把库代码输出得足够优雅。 Rollup 的核心思想Rollup 围绕 ESModule 设计。 ESModule 的 import / export 是...
Webpack 详解：Module、Bundle、Chunk、Loader 和 Plugin
前言Webpack 的核心价值不是“把 JavaScript 打成一个文件”，而是： 把前端项目里的所有资源都纳入模块系统。 JavaScript、CSS、图片、字体、SVG、Sass、TypeScript，都可以通过 import 进入同一套依赖图。 123import "./index.css";import logo from &q...
Webpack、Rollup 和 Vite：前端构建工具的三个时代
前言如果只用一句话理解 Webpack、Rollup 和 Vite： 工具 核心定位 Webpack 万物皆模块 Rollup 极致打包库 Vite 利用浏览器 ESM 的新一代开发工具 它们不是简单的“谁替代谁”，而是分别代表了前端工程化的几个阶段： Webpack 解决的是：前端所有资源如何统一工程化。 Rollup 解决的是：库代码如何输出得更干净、更...
前端工程化到底是什么：从模块化、构建工具到 CI/CD
前言前端工程化本质上是： 让前端项目能被多人、长期、稳定、高效开发。 它解决的不是某一个语法问题，而是一整套工程问题： 代码怎么组织？ 依赖怎么管理？ 项目怎么构建？ 团队怎么协作？ 质量怎么保证？ 代码怎么发布？ 项目变大以后怎么维护？ 所以前端工程化不是“学工具”，而是“解决大型项目协作问题”。 工具只是手段。 前端工程化主要包含什么可以先把它分成 10...
Flex 布局里 align-items 和 align-content 到底有什么区别
前言Flex 布局里有两个很容易混淆的属性： 12align-items: center;align-content: center; 它们看起来都和“交叉轴对齐”有关，也都经常被写在 flex 容器上。 但它们控制的对象完全不同： 属性 控制对象 什么时候生效 align-items 每一行里的 flex item 只要有 flex item 就会生效 a...
彻底搞懂 JavaScript 事件循环 (Event Loop) 机制
彻底搞懂 JavaScript 事件循环 (Event Loop) 机制💡 一、 为什么需要事件循环？（大前提）JavaScript 是一门**单线程（Single-Threaded）**语言。这意味着它在同一时间内只能做一件事。 如果遇到耗时任务（如请求网络接口、等待定时器），单线程如果傻等结果返回，整个网页就会卡死不动（无法点击、无法滚动）。为了解决这...
Next.js 完全指南：从入门到实战
📚 什么是 Next.js？Next.js 是一个基于 React 的全栈框架，由 Vercel 开发维护。它让你用 React 写前端的同时，也能轻松处理后端逻辑。 一句话理解 React 是造积木的工具Next.js 是用这些积木盖好的房子框架 🎯 为什么选择 Next.js？ 痛点 React 原生 Next.js 路由 需要装 react-rou...