前端项目构建流程

一只前端仔
301 阅读4分钟

Vue 项目通常使用 Vue CLI 或 Vite 作为构建工具，以下是一个典型的 Vue 项目的构建流程：

1. 初始化阶段

  • 加载配置文件：
    • Vue CLI 项目会加载 vue.config.js（如果有）。
    • Vite 项目会加载 vite.config.js。
  • 解析依赖：
    • 构建工具会解析 package.json 中的依赖项，并安装所需的 npm 包。
    • 确定项目的入口文件（通常是 src/main.js 或 src/main.ts）。

2. 依赖预构建（仅 Vite）

  • Vite 特有的优化：
    • Vite 会对项目的依赖（node_modules 中的库）进行预构建，将 CommonJS 模块转换为 ESM 格式，以提高开发服务器的启动速度。
    • 预构建结果会缓存到 node_modules/.vite 目录中。

3. 开发服务器启动

  • 启动开发服务器：
    • Vue CLI 使用 Webpack Dev Server。
    • Vite 使用基于原生 ESM 的开发服务器。
  • 热更新（HMR） ：
    • 开发服务器支持热模块替换（HMR），修改代码后无需刷新页面即可更新。

4. 代码编译

Vue 单文件组件（SFC）的编译

  • 解析 .vue 文件：
    • Vue 的单文件组件（.vue 文件）会被拆解为三部分：<template>、<script> 和 <style>。
    • <template> 会被编译为渲染函数（Render Function）。
    • <script> 会被转换为 JavaScript 代码。
    • <style> 会被处理为 CSS，并可能通过 PostCSS 进行进一步处理。
  • 依赖加载：
    • 通过 import 引入的依赖会被构建工具解析和打包。

其他文件的处理

  • JavaScript/TypeScript：
    • 通过 Babel 或 TypeScript 编译器进行转译。
  • CSS/预处理器：
    • 处理 CSS、SCSS、Less 等样式文件。
    • 通过 PostCSS 进行自动前缀等处理。
  • 静态资源：
    • 图片、字体等静态资源会被处理并输出到指定目录。

5. 打包构建

  • 生产环境构建：
    • 运行 npm run build 或 vite build 时，构建工具会对代码进行优化和打包。
  • 代码压缩：
    • JavaScript 代码通过 Terser 进行压缩。
    • CSS 代码通过 CSSNano 进行压缩。
    • 图片等静态资源会被压缩（如果配置了相关插件）。
  • Tree Shaking：
    • 移除未使用的代码（Dead Code Elimination）。
  • 代码分割：
    • 将代码拆分为多个 chunk，按需加载。

6. 输出文件

  • 生成输出目录：
    • 打包后的文件会输出到 dist 目录（默认情况下）。
    • 包括：
      • index.html：入口 HTML 文件。
      • assets：静态资源（JS、CSS、图片等）。
      • 其他 chunk 文件。

7. 部署

  • 将 dist 目录中的文件部署到服务器或 CDN。

代码执行顺序

在浏览器中运行 Vue 项目时，代码的执行顺序如下：

  1. 加载 HTML 文件：
    • 浏览器加载 index.html，解析其中的 <script> 和 <link> 标签。
  1. 加载入口文件：
    • 加载 src/main.js 或 src/main.ts，这是 Vue 应用的入口文件。
  1. 创建 Vue 实例：
    • 在入口文件中，通常会创建 Vue 实例并挂载到 DOM 元素上。
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  1. 渲染组件：
    • Vue 会解析 App.vue 及其子组件，生成虚拟 DOM，并将其渲染到页面上。
  1. 生命周期钩子执行：
    • Vue 组件的生命周期钩子（如 created、mounted）会依次执行。
  1. 响应式数据更新：
    • 当数据发生变化时，Vue 会自动更新视图。

总结

  • 编译流程：初始化 → 依赖预构建 → 开发服务器启动 → 代码编译 → 打包构建 → 输出文件 → 部署。
  • 执行顺序：加载 HTML → 加载入口文件 → 创建 Vue 实例 → 渲染组件 → 执行生命周期钩子 → 响应式更新。
  • 前端项目构建流程思维导图：
前端项目构建流程
├── 开发环境 (npm run dev)
│   ├── 1. 初始化
│   │   ├── 加载配置文件 config.js
│   │   └── 解析安装 package.json 依赖项
│   ├── 2. 依赖预构建
│   │   └── Vite 对 node_modules 的库进行预构建
│   ├── 3. 开发服务器启动
│   │   ├── Vue CLI 使用 Webpack Dev Server
│   │   └── Vite 使用基于原生 ESM 的服务器
│   └── 4. 代码编译 & 热更新
│       ├── Vue 单文件组件编译
│       ├── JS/TS 文件转译
│       ├── CSS/预处理器处理
│       └── 静态资源处理
└── 生产构建 (npm run build / vite build)
    ├── 1. 打包构建
    │   ├── 代码压缩
    │   ├── Tree-shaking 摇树优化
    │   ├── 代码分割 (Code Splitting)
    │   └── 按需加载处理
    └── 2. 输出文件
        └── 生成生产环境代码到 dist 目录

Vue 项目的编译和执行流程依赖于构建工具（如 Vue CLI 或 Vite），但整体逻辑是相似的。
如果你对 前端项目构建流程 还有疑问，欢迎在评论区讨论！💬

avatar
文章
阅读
粉丝