Skip to content

Vite的简介

Vite

下一代的前端工具链

特点:

  • 极速的服务启动
    • 使用原生 ESM 文件,无需打包!
  • 轻量快速的热重载
    • 无论应用程序大小如何,都始终极快的模块热替换(HMR)
  • 丰富的功能
    • 对 TypeScript、JSX、CSS 等支持开箱即用。
  • 优化的构建
    • 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
  • 通用的插件
    • 在开发和构建之间共享 Rollup-superset 插件接口。
  • 完全类型化的API
    • 灵活的 API 和完整的 TypeScript 类型。

一、Vite组成

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

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

浏览器支持

默认的构建目标是能支持 原生 ESM 语法的 script 标签、原生 ESM 动态导入 和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持 。

js
// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

二、Vite详解

1. 开发环境中为什么用Vite

html
当我们构建越来越大型的项目时,基于打包器的方式启动必须抓取并构建你的整个应用,然后启动服务。尤其是热更新(HMR)时,反馈迟钝极大的影响「开发体验」。

Vite一开始就将应用中的模块分为「依赖」和「源码」两类:

  • 依赖: 采用 esbuild预构建依赖(Go语言编写)。
  • 源码: 采用原生的 ESM方式 加载。
  • 源码模块的请求会根据 304 Not Modified 进行协商缓存,而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存,因此一旦被缓存它们将不需要再次请求。

2. 为什么生产环境仍需打包

为了在生产环境中获得最佳的加载性能,最好还是将代码进行 tree-shaking、懒加载和 chunk 分割(以获得更好的缓存)。

而 ESBuild 打包目前还不是很成熟(特别是代码分割和 CSS 处理方面),所以 Vite 附带了 Rollup 来进行生产环境的打包工作。

3. 构建你的第一个 Vite 项目

js
$ yarn create vite          // 使用 yarn
// OR
$ npm create vite@latest    // 使用 npm
// OR
$ pnpm create vite          // 使用 pnpm

// ==> 然后按照提示操作即可!

4. Vite的功能

  • NPM 依赖解析和预构建: 依赖是强缓存的。
  • 模块热替换
  • TypeScript:Vite 天然支持引入 .ts 文件。Vite 仅执行 .ts 文件的转译工作,并 不 执行任何类型检查。
  • VUE:
    • Vite 为 Vue 提供第一优先级支持:
    • Vue 3 单文件组件支持:@vitejs/plugin-vue
    • Vue 3 JSX 支持:@vitejs/plugin-vue-jsx
    • Vue 2.7 支持:vitejs/vite-plugin-vue2
    • Vue <2.7 的支持:underfin/vite-plugin-vue2
  • JSX:
    • .jsx 和 .tsx 文件同样开箱即用。JSX 的转译同样是通过 esbuild。
    • Vue 用户应使用官方提供的 @vitejs/plugin-vue-jsx 插件,它提供了 Vue 3 特性的支持,包括 HMR,全局组件解析,指令和插槽。
  • CSS:
    • @import 内联和变基
    • PostCSS
    • CSS Modules
    • CSS 预处理器
      js
      // # .scss and .sass
      npm add -D sass
      
      // # .less
      npm add -D less
      
      // # .styl and .stylus
      npm add -D stylus
  • 静态资源处理
  • JSON
  • Glob 导入
    • Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块:
    js
    const modules = import.meta.glob('./dir/*.js')
  • 动态导入
    js
    const module = await import(`./dir/${file}.js`)
  • WebAssembly
  • Web Workers

5. Vite使用插件

js
// 添加一个插件
$ 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实战

四、踩坑笔记

参考:
Vite 中文官网