文章目录一、开发环境启动时发生了什么1. Node 进程启动2. 依赖预构建仅 Vite3. 启动本地服务二、浏览器请求资源时发生了什么1. HTML 响应2. 模块请求3. 依赖加载三、更新代码时发生了什么HMR 流程1. 文件系统监听2. 增量编译3. HMR 消息推送4. 浏览器执行模块热替换四、生产构建时的不同点五、与 webpack 对比六、流程图一、开发环境启动时发生了什么当你运行npm run dev的时候本质上经历了以下几个阶段1. Node 进程启动Vite/webpack 的 CLI 命令启动一个 Node 进程。Node 读取vite.config.js或webpack.config.js配置。创建一个Dev Server底层一般用httpkoa/express。2. 依赖预构建仅 ViteVite 会用esbuild把node_modules里的依赖react、react-dom、lodash…快速预编译成 ESM 格式。为什么要预构建node_modules里通常是 CommonJS浏览器不能直接跑。避免浏览器发太多import请求合并成少量 bundle。结果会缓存到node_modules/.vite/。3. 启动本地服务服务监听在http://localhost:5173端口可配。提供静态文件服务HTML、图片、字体。模块转换服务JSX/TS → JS。HMR WebSocket 服务实时更新通知。二、浏览器请求资源时发生了什么当你打开http://localhost:51731. HTML 响应浏览器先请求/index.html。Dev Server 拦截并可能注入一些运行时代码如 HMR 脚本。浏览器解析到scripttypemodulesrc/src/main.jsx/script2. 模块请求浏览器会去请求/src/main.jsx。Dev Server 发现这是源码文件 → 走插件链处理解析 JSX →React.createElement如果是 TS → 去掉类型注解替换import.meta.env→ 注入环境变量返回一个浏览器能执行的 ESM 脚本。例如你写的import React from react; const App () h1Hello/h1; export default App;Vite 转换后可能变成importReactfrom/node_modules/.vite/deps/react.js;constApp()React.createElement(h1,null,Hello);exportdefaultApp;3. 依赖加载如果脚本里有import React from react浏览器会发请求/node_modules/.vite/deps/react.js。这个文件是 Vite预构建好的直接返回。这样整个应用就在浏览器里运行起来了。三、更新代码时发生了什么HMR 流程当你修改App.jsx里的内容比如h1Hello/h1 → h1Hello World!/h1会发生1. 文件系统监听Dev Server 内部用chokidar监听文件变动。一旦App.jsx变了 → 触发编译。2. 增量编译Vite 用esbuild或 babel 插件只重新编译变动的文件。不会重新打整个包这是 webpack 慢的原因。3. HMR 消息推送Dev Server 通过WebSocket向浏览器发送消息{type:update,path:/src/App.jsx}4. 浏览器执行模块热替换浏览器的 Vite runtime 收到消息。它会请求/src/App.jsx最新编译结果。只替换该模块并触发 React Fast RefreshUI 会更新组件 state 不会丢失四、生产构建时的不同点运行npmrun build流程和开发完全不同全量打包Vite 内部调用 Rollup把所有模块打成 bundle。生成 hash 文件名app.abc123.js防止缓存污染。代码优化Tree-shaking移除没用的代码。Scope hoisting减少闭包层级。压缩Terser/Esbuild。产物输出dist/目录dist/ ├── index.html ├── assets/ │ ├── index-xxxx.js │ ├── vendor-xxxx.js │ └── style-xxxx.css五、与 webpack 对比特性Vitewebpack开发启动秒级原生 ESM esbuild慢需要先打 bundle更新速度增量更新几乎秒级HMR 需要 rebuild慢依赖处理esbuild 预构建babel/ts-loader 全量编译打包器Rollupwebpack 本身插件生态新但增长快成熟功能强大六、流程图成功失败开发者保存文件文件监听器检测到变化构建工具增量编译Vite: 按需编译Webpack: 快速重建开发服务器通过 WebSocket 推送更新浏览器 HMR 运行时接收更新执行 HMR替换模块 保持状态 UI 无刷新更新进行整页重载 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目
前端本地开发构建和更新的过程
文章目录一、开发环境启动时发生了什么1. Node 进程启动2. 依赖预构建仅 Vite3. 启动本地服务二、浏览器请求资源时发生了什么1. HTML 响应2. 模块请求3. 依赖加载三、更新代码时发生了什么HMR 流程1. 文件系统监听2. 增量编译3. HMR 消息推送4. 浏览器执行模块热替换四、生产构建时的不同点五、与 webpack 对比六、流程图一、开发环境启动时发生了什么当你运行npm run dev的时候本质上经历了以下几个阶段1. Node 进程启动Vite/webpack 的 CLI 命令启动一个 Node 进程。Node 读取vite.config.js或webpack.config.js配置。创建一个Dev Server底层一般用httpkoa/express。2. 依赖预构建仅 ViteVite 会用esbuild把node_modules里的依赖react、react-dom、lodash…快速预编译成 ESM 格式。为什么要预构建node_modules里通常是 CommonJS浏览器不能直接跑。避免浏览器发太多import请求合并成少量 bundle。结果会缓存到node_modules/.vite/。3. 启动本地服务服务监听在http://localhost:5173端口可配。提供静态文件服务HTML、图片、字体。模块转换服务JSX/TS → JS。HMR WebSocket 服务实时更新通知。二、浏览器请求资源时发生了什么当你打开http://localhost:51731. HTML 响应浏览器先请求/index.html。Dev Server 拦截并可能注入一些运行时代码如 HMR 脚本。浏览器解析到scripttypemodulesrc/src/main.jsx/script2. 模块请求浏览器会去请求/src/main.jsx。Dev Server 发现这是源码文件 → 走插件链处理解析 JSX →React.createElement如果是 TS → 去掉类型注解替换import.meta.env→ 注入环境变量返回一个浏览器能执行的 ESM 脚本。例如你写的import React from react; const App () h1Hello/h1; export default App;Vite 转换后可能变成importReactfrom/node_modules/.vite/deps/react.js;constApp()React.createElement(h1,null,Hello);exportdefaultApp;3. 依赖加载如果脚本里有import React from react浏览器会发请求/node_modules/.vite/deps/react.js。这个文件是 Vite预构建好的直接返回。这样整个应用就在浏览器里运行起来了。三、更新代码时发生了什么HMR 流程当你修改App.jsx里的内容比如h1Hello/h1 → h1Hello World!/h1会发生1. 文件系统监听Dev Server 内部用chokidar监听文件变动。一旦App.jsx变了 → 触发编译。2. 增量编译Vite 用esbuild或 babel 插件只重新编译变动的文件。不会重新打整个包这是 webpack 慢的原因。3. HMR 消息推送Dev Server 通过WebSocket向浏览器发送消息{type:update,path:/src/App.jsx}4. 浏览器执行模块热替换浏览器的 Vite runtime 收到消息。它会请求/src/App.jsx最新编译结果。只替换该模块并触发 React Fast RefreshUI 会更新组件 state 不会丢失四、生产构建时的不同点运行npmrun build流程和开发完全不同全量打包Vite 内部调用 Rollup把所有模块打成 bundle。生成 hash 文件名app.abc123.js防止缓存污染。代码优化Tree-shaking移除没用的代码。Scope hoisting减少闭包层级。压缩Terser/Esbuild。产物输出dist/目录dist/ ├── index.html ├── assets/ │ ├── index-xxxx.js │ ├── vendor-xxxx.js │ └── style-xxxx.css五、与 webpack 对比特性Vitewebpack开发启动秒级原生 ESM esbuild慢需要先打 bundle更新速度增量更新几乎秒级HMR 需要 rebuild慢依赖处理esbuild 预构建babel/ts-loader 全量编译打包器Rollupwebpack 本身插件生态新但增长快成熟功能强大六、流程图成功失败开发者保存文件文件监听器检测到变化构建工具增量编译Vite: 按需编译Webpack: 快速重建开发服务器通过 WebSocket 推送更新浏览器 HMR 运行时接收更新执行 HMR替换模块 保持状态 UI 无刷新更新进行整页重载 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目