菜单

构建流程

相关源文件

本文档介绍了 Vite 的构建系统,该系统将应用程序源代码从开发环境转换为生产就绪的包。它涵盖了开发服务器的按需转换管道以及生成优化静态资源的生产打包过程。

有关构建期间的资源处理信息,请参阅 资源处理。有关 CSS 特定处理,请参阅 CSS 处理。有关 ESBuild 转译集成,请参阅 ESBuild 集成

概述

Vite 采用双模式构建系统,为开发和生产环境提供根本不同的方法。在开发过程中,Vite 提供带有按需转换的原生 ES 模块,而生产构建则使用 Rollup 创建优化的包。

来源: packages/vite/package.json1-203

构建 API 入口点

构建系统为不同的构建场景公开了几个关键函数

主要的构建函数接受一个配置对象并协调整个生产构建过程,而 createServer() 则处理开发时的构建和实时转换。

来源: packages/vite/package.json19-33

生产构建流程

生产构建遵循结构化的流程,通过多个阶段转换源代码

该流程广泛利用 Rollup 的插件系统,Vite 为不同的转换阶段提供专用插件。

来源: packages/vite/package.json84-89

核心构建依赖项

Vite 的构建系统集成了几个关键工具,用于构建过程的不同方面

工具版本目的构建阶段
rollup^4.40.0包生成生产
esbuild^0.25.0快速转译两者
postcss^8.5.3CSS 处理两者
picomatch^4.0.2文件模式匹配两者
fdir^6.4.4快速目录扫描两者
tinyglobby^0.2.14Glob 模式解析两者

构建系统通过统一的插件接口协调这些工具,该接口抽象了它们各自的 API。

来源: packages/vite/package.json83-90

开发与生产的差异

构建系统根据目标环境实施不同的策略

开发构建优先考虑速度和开发者体验,而生产构建则侧重于优化和最小化包大小。

来源: packages/vite/package.json70-72

构建输出生成

构建过程会生成多种类型的输出文件,它们各有不同的用途

清单文件提供了原始文件名与其哈希后的生产版本之间的映射,从而能够与后端框架和 SSR 系统集成。

来源: packages/vite/package.json47-55

插件集成点

构建系统提供了许多钩子,插件可以在其中拦截和修改构建过程

插件可以参与开发和生产构建,构建系统会自动确定哪些钩子与每种模式相关。

来源: packages/vite/package.json94-154