Category
Engineering
SEO 进阶：怎么提升排名，以及怎么用数值衡量效果
前言上一篇《SEO 从 0 开始：搜索引擎如何理解一个网页》讲的是“理解 SEO”——搜索引擎怎么发现、收录、排名，前端该怎么配合。 但当基础配置都做完之后，新的问题就来了： 接下来怎么提升排名？我又怎么知道自己的 SEO 到底做得好不好？有没有数值标准？ 这一篇就专门解决这个问题。它把 SEO 从“一次性配置”推进到“可量化的持续运营”。 整体分三块： 怎...
SEO 从 0 开始：搜索引擎如何理解一个网页
前言SEO 是 Search Engine Optimization 的缩写，中文通常叫“搜索引擎优化”。 很多人一听 SEO，会以为它是“堆关键词”“骗搜索引擎”“想办法排第一”。这其实是很旧、也很危险的理解。 更准确地说，SEO 解决的是： 让搜索引擎更容易发现、理解、收录和展示你的内容，同时让真正的用户更愿意点击和阅读。 如果一篇文章写得很好，但搜索引...
一文讲清 CSR、SSR、SSG：前端页面到底在哪里渲染？
前言前端页面最终都会变成浏览器里的 HTML、CSS 和 JavaScript。 但问题是： 这份 HTML 是在哪里生成的？ 是在浏览器里由 JavaScript 临时生成？是在服务器收到请求时实时生成？还是在项目构建时提前生成好？ 这三个答案，分别对应了前端里最常见的三种渲染模式： CSR：Client-Side Rendering，客户端渲染 SSR：...
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...