前端构建工具对比：Webpack、Vite 与 esbuild
随着前端项目规模的增长，构建工具的选择直接影响开发体验和产物性能。本文对比三款主流工具——Webpack、Vite 和 esbuild，帮助你根据场景做出合适的选择。
1. Webpack：生态最完善的打包方案Webpack 自 2012 年发布以来，一直是前端工程化的标准答案。它以入口（entry）为起点，通过 Loader 处理各种资源，通过 Plugin 扩展构建流程。
核心优势
生态极其丰富：几乎所有前端框架都提供官方 Webpack 配置或 CLI。
高度可配置：从代码分割、Tree Shaking 到模块联邦（Module Federation），功能全覆盖。
成熟度极高：经过大规模生产环境验证，社区文档和解决方案非常完善。
主要劣势
冷启动慢：大型项目启动开发服务器可能需要数十秒。
配置复杂：初学者常被庞大的 webpack.config.js 劝退。
123456789101112131415// webpack.config.js 示例module.exports = { entry: './src/index.js', outp ...
TypeScript 入门：类型系统与工程实践
TypeScript 是 JavaScript 的超集，它通过静态类型检查在编译阶段发现潜在错误。对于中大型前端项目，TypeScript 已经是事实标准。本文从基础类型出发，介绍一些工程中常用的实践技巧。
1. 为什么选择 TypeScript
提前发现错误：在编码和编译阶段就能捕获类型不匹配、属性缺失等问题。
提升可维护性：类型即文档，清晰的接口定义让代码更易读懂。
增强 IDE 体验：自动补全、跳转定义、重构支持都依赖类型信息。
2. 基础类型速览12345let name: string = 'Galaxy'let age: number = 25let isActive: boolean = truelet hobbies: string[] = ['coding', 'music']let user: { name: string; age: number } = { name: 'Galaxy', age: 25 }
接口与类型别名1234567in ...
React 性能优化：从渲染机制到实战技巧
React 的声明式 API 让 UI 开发变得高效，但如果不注意性能，组件的频繁重渲染会导致页面卡顿。本文从 React 的渲染机制出发，介绍几种最常见、最有效的优化手段。
1. 理解 React 的渲染流程React 组件在以下情况会触发重新渲染：
组件自身的 state 发生变化（useState、useReducer）。
父组件重新渲染，导致子组件默认也会被渲染。
Context 的值发生变化，消费该 Context 的组件重新渲染。
这意味着，即使子组件的 props 没有变化，它也可能因为父组件更新而白白渲染一次。
2. 使用 React.memo 避免无效渲染React.memo 是一个高阶组件，用于对函数组件进行浅比较。如果 props 没有变化，就跳过本次渲染。
12345678const UserCard = React.memo(({ name, avatar }) => { return ( <div className="user-card"> <img src=& ...
CSS Flexbox 布局实战：从概念到常见页面结构
在响应式布局和组件化开发盛行的今天，Flexbox 已经是前端开发者必须掌握的布局方式。它比传统的 float 更直观，比 Grid 更适合一维排列场景。
1. 什么是 FlexboxFlexbox（Flexible Box）是一种用于在容器中分配空间和对齐内容的布局模型。它特别适合构建导航栏、卡片列表、居中对齐等一维布局场景。
一个 Flex 容器只需要一行代码：
123.container { display: flex;}
2. 主轴与交叉轴Flexbox 的核心概念是两条轴：
主轴（Main Axis）：由 flex-direction 决定，默认是水平方向（row）。
交叉轴（Cross Axis）：与主轴垂直的方向。
123456.container { display: flex; flex-direction: row; /* row | row-reverse | column | column-reverse */ justify-content: center; /* 主轴对齐 */ align-items: ...
JavaScript 异步编程指南：从回调到 async/await
JavaScript 的异步模型是前端开发的核心能力之一。本文从事件循环出发，梳理 callback、Promise 到 async/await 的演进路线。
1. 为什么 JavaScript 需要异步JavaScript 是单线程语言，这意味着同一时间只能执行一段代码。如果耗时操作阻塞主线程，页面就会卡顿甚至失去响应。因此，网络请求、定时器、文件读写等操作必须被设计成异步执行。
2. 回调函数时代最早的异步写法是回调函数：
123setTimeout(() => { console.log('1 秒后执行')}, 1000)
嵌套一多，就会出现「回调地狱」（Callback Hell），代码横向扩展，难以维护：
1234567getData(url, (data) => { processData(data, (result) => { saveResult(result, (msg) => { console.log(msg) }) &# ...
Hello
Welcome to Galaxy! This is your very first post.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment