Vite 新型前端构建工具学习运用 | 豆包MarsCode AI刷题

啊凍
58 阅读7分钟

Vite简介

Vite是一种新型的前端构建工具，它能够显著提升前端开发体验。Vite主要由两部分组成：

  1. 开发服务器：它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。

  2. 构建指令：使用Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的高度优化过的静态资源。

Vite的核心理念是借助浏览器原生ES Modules能力，当浏览器发出请求时，为浏览器按需提供ES Module文件，浏览器获取ES Module文件会直接执行。

Vite的主要特点包括：

  • 即时服务启动：快速启动开发服务器。
  • 闪电般快速的热更新：无论应用程序大小如何，都始终极快的模块热重载（HMR）。
  • 丰富的功能：对TypeScript、JSX、CSS等支持开箱即用。
  • 优化的构建：可选“多页应用”或“库”模式的预配置Rollup构建。
  • 通用的插件接口：在开发和构建过程中使用插件。
  • 完全类型化的API：提供完整的类型支持。

Vite旨在提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性。 Vite还支持多种前端框架和语言，如Vue、React、Angular等，以及TypeScript、CoffeeScript和Sass等，使得开发者可以更加灵活地选择自己熟悉的技术栈。

Vite 和 Webpack 对比

Vite和Webpack都是现代前端开发中常用的构建工具，但它们在设计理念、性能表现和使用方式上有一些显著的区别：

  1. 构建方式：

    • Vite：Vite在开发环境下使用原生的ES模块导入（ESM）来服务文件，这意味着它不需要打包操作，可以快速启动和热更新。在生产环境下，Vite使用Rollup进行打包，因为Rollup在处理ES模块时非常高效。
    • Webpack：Webpack在开发和生产环境下都进行打包。Webpack通过 loader 和 plugin 系统提供了强大的模块转换和打包能力，可以处理各种类型的资源，如 CSS、图片等。

  2. 性能：

    • Vite：由于Vite在开发环境中避免了打包，因此启动速度和热模块替换（HMR）非常快。
    • Webpack：Webpack的启动时间和热更新速度通常比Vite慢，因为它需要解析和打包整个应用。

  3. 配置：

    • Vite：Vite旨在提供零配置或最少配置的体验，许多功能都是开箱即用的。
    • Webpack：Webpack需要更详细的配置来设置loader和plugin，这为定制构建过程提供了更大的灵活性，但也意味着更高的学习曲线和配置复杂性。

  4. 生态系统和插件：

    • Vite：Vite的生态系统相对较新，但正在迅速增长。它提供了一些内置插件来支持常见的功能。
    • Webpack：Webpack拥有一个非常成熟和庞大的生态系统，有大量的loader和plugin可供选择，这使得Webpack能够支持几乎所有类型的前端开发需求。

  5. 兼容性：

    • Vite：Vite依赖于现代浏览器的ES模块特性，因此它可能不适用于需要支持旧浏览器的项目。
    • Webpack：Webpack支持更多的浏览器和环境，包括旧版本的浏览器，通过适当的配置和polyfills。

  6. 类型支持：

    • Vite：Vite提供了良好的TypeScript支持，并且API完全类型化。
    • Webpack：Webpack也支持TypeScript，但可能需要额外的配置。

  7. 多页面应用（MPA）支持：

    • Vite：Vite原生支持多页面应用，可以轻松配置多个入口点。
    • Webpack：Webpack也支持多页面应用，但可能需要更多的配置。

Vite以其快速的开发服务器和简化的配置而受到开发者的欢迎，特别适合现代的、主要由ES模块构成的前端项目。而Webpack则以其强大的灵活性和成熟的生态系统，在需要复杂构建流程的项目中占据优势。选择哪个工具，取决于项目的具体需求和团队的偏好。

Vite 基本架构

Vite 的基本架构可以分为以下几个关键部分：

  1. 入口和启动：

    • Vite CLI：Vite 提供了一个命令行界面（CLI），用于初始化项目、运行开发服务器和构建生产代码。
    • Vite 配置文件：通常是一个 vite.config.js 文件，用于配置项目的构建和开发选项。

  2. 开发服务器：

    • 原生 ES 模块导入：Vite 在开发模式下利用浏览器的原生 ES 模块导入功能，无需打包即可快速启动和热更新。
    • 模块热替换（HMR）：Vite 提供了快速的模块热替换功能，允许在开发过程中实时更新代码而无需刷新页面。

  3. 构建和打包：

    • Rollup：Vite 在构建模式下使用 Rollup 作为其打包器，因为 Rollup 在处理 ES 模块时非常高效，特别是在单页面应用（SPA）中。
    • 代码分割和懒加载：Vite 支持代码分割和懒加载，以优化加载时间和性能。

  4. 插件系统：

    • Vite 允许通过插件扩展其功能。插件可以处理特定的文件类型、提供额外的功能或集成第三方库。

  5. 构建优化：

    • 树摇（Tree-shaking）：Vite 支持在构建过程中移除未引用的代码，以减少最终打包文件的大小。
    • 预打包第三方库：Vite 允许预打包第三方库，以减少构建时间和提高性能。

  6. 兼容性和转译：

    • Babel：Vite 可以通过插件支持 Babel，以转译 JavaScript 代码，使其兼容旧浏览器。
    • CSS 预处理器：Vite 支持 CSS 预处理器，如 Sass 和 Less，无需额外配置。

  7. 服务端渲染（SSR）支持：

    • Vite 提供了对服务端渲染的支持，允许开发者构建服务端渲染的应用。

  8. 类型支持：

    • Vite 的 API 是完全类型化的，这使得在 TypeScript 项目中使用 Vite 时可以获得更好的开发体验。

  9. 多页面应用（MPA）支持：

    • Vite 原生支持多页面应用，可以轻松配置多个入口点。

  10. 调试和分析：

    • Vite 提供了构建分析工具，可以帮助开发者理解构建过程中的依赖和优化点。

Vite 的架构设计旨在提供快速的开发体验和高效的生产构建。通过利用现代浏览器的特性和工具链，Vite 能够为前端开发带来显著的性能提升和简化的工作流程。

如何扩展Vite的插件

Vite的插件系统是通过扩展Rollup插件接口来实现的，同时增加了一些Vite特有的配置项。以下是Vite插件系统的扩展方式：

  1. 添加插件： 要使用一个插件，首先需要将其添加到项目的devDependencies中，然后在vite.config.js配置文件中的plugins数组中引入该插件。例如，使用官方插件@vitejs/plugin-legacy来支持传统浏览器：

    // 安装插件
$ npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

    如果插件不使用Vite特有的钩子，它可以作为兼容Rollup的插件来实现。

  2. 查找插件： Vite提供了官方插件和社区插件列表，你可以通过npm搜索链接来找到遵循推荐约定的Vite插件，或者通过npm Rollup插件搜索链接获取Rollup插件。

  3. 插件排序： Vite允许你强制插件排序，这对于插件之间的依赖和执行顺序很重要。

  4. 插件配置： Vite插件可以是一个返回实际插件对象的工厂函数，该函数可以接受允许用户自定义插件行为的选项。插件配置可以在vite.config.js中直接使用。

  5. 插件钩子： Vite插件系统提供了多个钩子，包括resolveId、load、transform等，这些钩子在开发服务器启动时和每个传入模块请求时被调用。

  6. 开发插件： 开发Vite插件时，可以利用Vite和Rollup提供的插件API。一个简单的插件示例可能包括name、buildStart、resolveId、load和transform等属性和方法。

  7. 插件集成： 对于复杂的特性，如框架集成，plugins数组也可以接受将多个插件作为单个元素的预设，这有助于简化配置。

通过这些方式，Vite的插件系统为用户提供了灵活的扩展能力，使得Vite能够适应各种不同的开发需求和场景。

avatar
文章
阅读
粉丝