Tag
前端工程化
SEO 从 0 开始：搜索引擎如何理解一个网页
前言SEO 是 Search Engine Optimization 的缩写，中文通常叫“搜索引擎优化”。 很多人一听 SEO，会以为它是“堆关键词”“骗搜索引擎”“想办法排第一”。这其实是很旧、也很危险的理解。 更准确地说，SEO 解决的是： 让搜索引擎更容易发现、理解、收录和展示你的内容，同时让真正的用户更愿意点击和阅读。 如果一篇文章写得很好，但搜索引...
微信小程序 JSBridge 详解：wx API 如何调用原生能力
📚 前言前两篇我们先建立了两条主线： 1小程序运行在微信客户端宿主环境里 以及： 1小程序页面由逻辑层和渲染层共同完成 这一篇继续往下讲： 小程序里的 wx.xxx API，为什么能调用微信和系统的原生能力？ 比如： 1234wx.login()wx.scanCode()wx.getLocation()wx.chooseImage() 这些 API 看起来...
微信小程序和小游戏底层逻辑：从运行时链路开始理解
📚 前言如果要系统学习微信小程序和小游戏，不建议一开始就背 API。 更稳的入口是先问一个问题： 小程序和小游戏的代码，到底跑在哪里？ 很多现象都能从这个问题推出来： 为什么小程序没有完整 DOM？ 为什么更新页面要用 setData？ 为什么频繁 setData 会卡？ 为什么小程序能调用扫码、支付、定位这些原生能力？ 为什么小游戏可以直接画 Canva...
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...