← 返回全栈资料库首页

🔨 构建与部署图解

7篇 · 从源码到运行环境全链路 · SVG可视化 · 让"半生不熟"变成"彻底搞懂"

📦 共7篇 · 前端打包/Vue到浏览器/React到浏览器/Java到JVM/Maven/Docker/CI-CD

🔗 代码到运行环境全链路(新)

你写的代码怎么从源文件变成最终跑起来的程序?这三个页面一条线串到底——源码长什么样→编译器做了什么→打包成什么→在哪运行→怎么调试。

05

💚 Vue代码到浏览器全链路

.vue三段式结构→Vue Compiler编译成render函数→Vite打包成chunk→浏览器F12的每个面板看什么→SourceMap原理→scoped的data-v属性是怎么加的

.vue文件 render函数 Vite打包 F12面板 SourceMap
06

⚛️ React代码到浏览器全链路

JSX到底是什么→Babel编译成createElement/jsx()→Webpack/Vite打包→React Fiber两阶段渲染(可中断)→F12和React DevTools→和Vue的编译优化对比

JSX Babel编译 Fiber架构 React DevTools
07

☕ Java代码到JVM全链路

.java→javac编译成.class字节码→Maven打包fat jar→jar内部结构(BOOT-INF)→JVM类加载5步→Spring Boot启动7步(从main到能接收请求)→对比前端构建的核心区别

javac编译 Maven打包 fat jar JVM类加载 Spring Boot
🛠️ 构建工具与部署流程
01

📦 前端打包全链路

Webpack打包6步流水线(Entry→Resolver→Loader→Plugin→Chunk→Output)+ Vite双模式(esbuild快闪店/Rollup精品工坊)+ Tree Shaking摇树 + Code Splitting分批送

Webpack Vite Loader Plugin HMR
02

☕ Maven全链路图解

3套生命周期(clean/default/site)+ default核心9阶段 + 依赖解析路径(本地→私服→中央)+ 5种Scope + 依赖冲突解决(最短路径/先声明)

生命周期 依赖解析 Scope 冲突解决
03

🐳 Docker命令执行图解

docker build分层构建+缓存机制 + docker pull分层下载 + docker run镜像→容器 + docker compose多容器编排 + Volume持久化 + 端口映射

docker build docker run compose Volume
04

🔄 CI/CD与部署图解

CI/CD全链路8步流水线 + 3种部署策略(蓝绿/金丝雀/滚动)+ GitHub Actions实战 + Nginx反向代理配置 + 负载均衡

CI/CD 部署策略 GitHub Actions Nginx