vite 系列

00-聊一聊 vite

01-vite 等构建工具对比

02-vite 实战入门

vite

Vite 的设计目标是解决传统构建工具（如 Webpack）在开发过程中存在的一些性能瓶颈，特别是在冷启动和热更新（HMR）方面。

Vite 利用了现代浏览器的特性，例如原生 ES 模块和 HTTP/2，以加速开发和生产构建流程。

对比表格

vite 与其他构建工具对比如下:

特性 Vite Webpack Parcel esbuild Snowpack Rollup Turbo
启动速度 极快（基于原生 ES 模块，开发时无需打包） 较慢（需要打包过程） 快（无需配置，快速启动） 极快（专注于性能） 快（原生模块加载，快速启动） 快（特别适合构建类库） 快（增量构建、缓存优化）
开发体验 快速热更新，模块热替换（HMR） 热更新支持，配置复杂 零配置，快速热更新 快速编译和构建，支持 HMR 快速、零配置，使用 ES 模块 支持现代模块和树摇 适合大规模 monorepo 项目，增量构建和缓存
配置复杂度 低（开箱即用，易于使用） 高（灵活配置，功能强大但较复杂） 低（零配置，自动化） 低（使用简便，快速配置） 低（无配置） 低（主要用于库构建，配置简单） 低（专注于 monorepo 和增量构建）
打包模式 按需加载，开发时不打包，生产时使用 Rollup 打包 静态打包，所有文件统一打包 打包时自动优化，零配置 打包时使用高效的优化策略 无打包，直接使用原生模块加载，生产时需要构建 打包，优化输出文件体积 通过缓存和增量构建优化打包过程
性能优化 极高（热更新、按需加载、快速构建） 树摇、代码分割、各种优化插件 快速编译和构建，但性能略逊于 Vite 非常快速，且支持高效的压缩和树摇 快速（原生模块，减少构建过程） 小巧、优化的输出文件，支持树摇（Tree-shaking） 高效的增量构建和缓存机制
生态支持 强大（插件丰富，逐步发展中） 最强（广泛的插件和工具支持） 中等（插件支持较少，但增长迅速） 中等（主要针对性能优化，插件生态较小） 中等（支持许多现代 Web 工具） 强（专注于库和小型项目，支持 ES 模块） 强（专注于 monorepo 和企业级应用）
支持的语言/格式 支持现代 JavaScript、TypeScript、Vue、React 等 支持几乎所有语言和框架（通过 loader 插件） 支持 JavaScript、TypeScript、CSS、HTML 等 支持 JavaScript、TypeScript、JSX、CSS 等 支持 JavaScript、TypeScript、CSS、HTML 等 支持 JavaScript、TypeScript、JSX、CSS 等 支持 JavaScript、TypeScript、JSON、YAML 等
适用场景 现代 Web 应用、前端框架（Vue、React 等） 大型复杂应用，需高度定制化 中小型项目，快速开发 快速构建和编译，尤其适合 TypeScript 和 JSX 开发时希望尽可能简化配置和构建过程的项目 构建 JavaScript 库或小型 Web 应用 大型项目、monorepo 或分布式架构
增量构建 支持 支持（但配置复杂） 支持 支持 支持 支持 强（优化了增量构建和缓存）
支持热更新（HMR） 支持 支持 支持 支持 支持 支持 支持
社区和文档支持 非常活跃，文档清晰 非常活跃，文档全面 快速增长，文档相对简洁 社区较小，但文档简洁易懂 较小，但文档简单明了 非常活跃，文档良好 非常活跃，特别是针对 monorepo 和 CI/CD 设计

总结

Vite: 提供极快的启动和开发体验，适用于现代 Web 应用，尤其是 Vue 和 React 项目，配置简单，热更新迅速。

Webpack: 最强大的构建工具，适用于复杂的项目，支持高度定制，但配置较为复杂。

Parcel: 零配置工具，适用于小型到中型项目，快速开发，但性能略逊于 Vite。

esbuild: 以极快的速度进行编译和打包，适合需要快速构建的 TypeScript 项目。

Snowpack: 基于原生 ES 模块，适合快速构建并减少打包过程，适合小型项目。

Rollup: 主要用于 JavaScript 库的构建，生成优化的小体积包，适合类库开发。

Turbo: 专注于大型 monorepo 项目，增量构建和缓存优化是其特色，适合企业级应用。

选择合适的构建工具通常取决于项目的需求和复杂性，Vite、esbuild 和 Parcel 更适合开发过程中对速度和简易性的需求，而 Webpack 和 Rollup 则适合需要高度定制和优化的应用。

chat

其他工具

除了 Vite，还有一些其他现代的构建工具，提供类似的功能和快速的开发体验。

以下是几个常见的选择：

  1. Webpack
    • 描述: Webpack 是最流行的 JavaScript 构建工具之一，功能强大，插件丰富。它支持模块化打包、代码分割、热更新等功能，适用于复杂的应用程序。虽然配置相对复杂，但可以通过各种插件和加载器进行高度定制化。
    • 特点: 配置灵活、强大的插件生态、社区支持广泛。
    • 适用场景: 中大型项目，要求较高的定制化和灵活性。
  2. Parcel
    • 描述: Parcel 是一个零配置的构建工具，类似于 Vite，强调开箱即用。它支持热模块替换（HMR）和代码分割，且启动速度快。Parcel 内置了对许多语言和文件类型的支持。
    • 特点: 零配置、快速启动、内置支持现代 JavaScript、CSS 和 HTML 处理。
    • 适用场景: 中小型项目，开发过程中希望简化配置。
  3. esbuild
    • 描述: esbuild 是一个极其快速的 JavaScript 构建工具，专注于性能。它比 Webpack 快得多，且支持现代 JavaScript 特性，如 TypeScript、JSX 等。esbuild 的 API 也可以用作插件系统来扩展功能。
    • 特点: 极其快速、支持 TypeScript、压缩和打包。
    • 适用场景: 需要快速构建和编译的项目。
  4. Snowpack
    • 描述: Snowpack 是一个轻量级的构建工具，采用原生 ES 模块来替代传统的打包方式。它不需要像 Webpack 那样进行打包，开发时直接通过浏览器加载原生模块。Snowpack 提供了快速的开发体验，支持插件系统。
    • 特点: 原生模块支持、快速构建、零配置。
    • 适用场景: 快速开发和构建现代 Web 应用。
  5. Rollup
    • 描述: Rollup 是一个 JavaScript 打包工具，特别适合构建类库和小型应用。它与 Webpack 相比更加简单，且生成的包通常更小、性能更好。它支持现代 JavaScript 模块，并且有很多插件支持。
    • 特点: 小巧、优化的输出代码、高效的树摇（Tree shaking）。
    • 适用场景: 构建库、类库和小型 Web 应用。
  6. Turbo (由 Vercel 推出)
    • 描述: Turbo 是一个专为多包（monorepo）设计的构建工具，适用于大型代码库的构建和管理。它支持增量构建和缓存，能有效加速构建过程。
    • 特点: 高效的增量构建、缓存机制、专注于多包管理。
    • 适用场景: 复杂的大型应用，特别是多包（monorepo）项目。

参考资料

https://github.com/jekip/naive-ui-admin