vite 系列

00-聊一聊 vite

01-vite 等构建工具对比

02-vite 实战入门

vite 是什么？

Vite 是一个由 Evan You（Vue.js 的创造者）开发的现代化构建工具，旨在为前端开发提供更快、更流畅的体验。

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

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

Vite 的主要特点

  1. 极速冷启动：
    • Vite 通过利用浏览器对 ES 模块的原生支持，实现了按需加载。在开发模式下，Vite 不需要对整个项目进行打包，而是根据请求动态加载需要的文件，避免了传统构建工具在启动时需要处理大量文件的问题。
  2. 基于 ES 模块的开发模式：
    • 在开发模式下，Vite 利用了现代浏览器对原生 ES 模块的支持。浏览器直接请求模块文件，而不是经过复杂的打包过程。这种方式大大缩短了冷启动时间。
    • 当你修改源代码时，Vite 仅重新加载变更的模块，而无需重新构建整个应用。
  3. 快速热模块替换（HMR）：
    • Vite 提供了快速的热模块替换功能。当你修改代码时，Vite 会仅更新变更的部分，而不会刷新整个页面。这使得开发过程更加高效，特别是在大型项目中。
    • 由于 Vite 使用原生 ES 模块，它能够精确地追踪哪些模块发生了变化，快速传递变更给浏览器。
  4. 开箱即用的优化：
    • Vite 默认内置了很多优化，如：代码分割、自动加载模块、支持 Vue、React、TypeScript 等主流技术栈，以及内置支持 PostCSS、CSS Modules 和静态资源处理等。
    • 开发者无需手动配置复杂的工具链（如 Webpack 或 Babel），Vite 默认启用了很多最佳实践，并且支持高度的自定义。
  5. 支持生产构建优化：
    • Vite 在生产构建时依赖 esbuild，这是一个高效的 Go 语言编写的打包工具，能够在非常短的时间内完成代码转译、压缩和优化操作。
    • Vite 对 JavaScript、CSS 和静态资源进行优化，使得构建出来的产物非常高效，支持代码分割和懒加载。
  6. 插件生态：
    • Vite 提供了强大的插件机制。你可以通过插件来扩展其功能，集成其他工具或调整构建流程。
    • Vite 的插件系统与 Rollup 插件兼容，因此可以使用大量现有的 Rollup 插件。
  7. 支持多种前端框架：
    • Vite 原生支持 Vue 和 React，但也支持其他框架，如 Svelte、Preact、LitElement 等。
    • 通过安装相应的插件，你可以在 Vite 中使用任何主流框架。

Vite 主要特性介绍

1. 开发模式

  • ES 模块支持：Vite 利用浏览器原生支持的 ES 模块，按需加载模块，无需一次性打包整个项目。这样做的好处是，开发时启动速度更快，且更新速度更快。

  • 动态导入：Vite 支持原生的动态 import() 语法，能在需要时动态加载模块。

  • 快速 HMR：Vite 对每个模块有更精确的热更新支持，模块变动时只更新有变化的部分，而不是重新加载整个页面。

2. 构建模式

  • 基于 esbuild：Vite 在生产构建时使用 esbuild 进行 JavaScript 和 CSS 的压缩、转译和打包。esbuild 是一个用 Go 编写的构建工具，性能非常高，能够大幅缩短构建时间。

  • 代码分割：Vite 默认支持代码分割功能，能够将你的应用分为多个模块，以便按需加载，优化加载时间。

  • 自动压缩：Vite 会自动对生产环境的代码进行压缩，以减小文件体积。

3. 插件系统

  • Rollup 插件支持：Vite 的插件机制与 Rollup 兼容，你可以使用大部分现有的 Rollup 插件，也可以编写自己的插件来扩展功能。

  • 内置插件：Vite 提供了一些内置插件，如对 Vue 和 React 的支持、支持 TypeScript、CSS 处理、静态资源处理（如图片、字体）等。

4. 静态资源

  • 静态资源支持：Vite 支持导入图片、字体、JSON 等静态资源，并自动进行处理。资源可以作为模块导入，Vite 会自动为其生成 URL。

5. 兼容性

  • Vue 3 默认支持：Vite 默认支持 Vue 3 的开发，包括 Vue 3 的 Composition API 和新版本的特性。

  • React/Preact 支持：Vite 也为 React 和 Preact 提供了原生支持，并且提供了相关的插件。

  • TypeScript 支持：Vite 内置对 TypeScript 的支持，配置非常简单。

前端的构建是不是太多了？实在重复造轮子吗？

每个工具的设计哲学和目标都有差异，适用于不同的需求和场景。

我们可以从几个方面来看这个问题：

1. 需求的多样性

  • 项目规模与复杂度：不同类型的项目（如小型项目、复杂应用、库构建等）有不同的需求。小型项目可能需要一个简单快速的构建工具，而大型项目可能需要更强大且可定制的构建工具。比如 Vite 和 Parcel 适合小型到中型项目，Webpack 和 Rollup 更适合复杂的、需要精细控制和优化的项目。
  • 生态和社区支持：有的构建工具有着更强的社区支持和插件生态，能提供更多的功能扩展。例如，Webpack 作为一个成熟的工具，有着广泛的插件和加载器支持，适用于几乎所有的前端需求；而 Vite 则专注于开发体验和现代前端技术栈。
  • 开发体验：开发者体验也是一个重要的考虑因素。工具如 Vite 和 Parcel 强调开箱即用和快速启动，减少配置成本；而 Webpack 则更多强调灵活性和功能的可扩展性，适合那些需要高度定制的项目。

2. 前端工具的演变

  • 前端构建工具的演化主要是为了应对不同的技术变革。比如，Webpack 的出现是在 JavaScript 生态需要模块化和资源管理的背景下，而随着 ES 模块的普及和开发体验的需求增加，像 Vite 这样的工具才应运而生。
  • esbuild、Parcel、Vite 等工具强调的是更高的性能和更流畅的开发体验，尤其在热更新和构建速度上做了优化。而 Webpack 和 Rollup 则提供了更多的功能和灵活性，适合更复杂的项目需求。

3. 选择权和灵活性

  • “重复造轮子” 的感觉往往来源于多种工具之间的功能重叠，但实际上，它们也给开发者提供了更多的选择。在不同的场景下，开发者可以根据自己的需求和偏好选择最适合的工具。例如：
    • 如果你的项目要求启动速度非常快，热更新非常流畅，可能 Vite 或 esbuild 更适合。
    • 如果你的项目需要处理大量的模块、资源优化和代码分割，可能还是 Webpack 或 Rollup 更合适。
  • 这种多样性带来了灵活性和创新性，让开发者可以选择适合自己的工具，避免一个工具“万能”的单一局限。

4. 创新和优化

  • 每个工具的出现和进化，背后都有不同的目标和动机。比如：
    • Vite 提供极快的开发体验，它通过依赖于原生 ES 模块和现代浏览器特性来避免传统打包工具中的瓶颈。
    • esbuild 的设计目标是尽可能快地构建和编译，尤其适合需要快速构建的项目。
    • Webpack 提供了高度定制化和丰富的插件系统，适合需要复杂构建过程和优化的项目。
  • 这些工具之间的竞争实际上推动了前端开发工具的创新。例如，esbuild 和 Vite 就通过优化构建速度和开发体验，给开发者带来了显著的效益。

5. 标准化与统一化的挑战

  • 尽管很多工具提供了相似的功能，但不同的前端框架和技术栈（如 React、Vue、Angular 等）对构建工具有不同的偏好。工具的发展有时是为了应对这些框架或特定场景的需求。
  • 由于前端技术的多样性，不同的团队和项目有不同的需求，工具选择因此变得分散。而统一化的构建工具标准化往往是一个渐进的过程，随着技术的成熟和社区的协作，可能会逐步趋于统一。

总结

前端构建工具的多样性并不意味着“重复造轮子”，而是对不断变化的需求、技术栈和开发者体验的响应。

虽然工具之间有重叠，但它们各自的差异化功能、优化目标和使用场景使得开发者能够在不同的项目和环境下作出选择。

最终的目标是提高开发效率、优化性能并降低复杂度，因此这些工具的演化和竞争对前端开发的进步起到了积极的推动作用。

参考资料

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