Vite

看热闹不闲事大
2 阅读11分钟

Vite

目前前端生态中，主流构建工具可分为 “全能型”（功能全面，适合复杂应用）、“专注型”（垂直场景优化，如库打包）、“极速型”（性能优先，适合开发环境）三大类。

  1. vite: 现代开发体验标杆

    • 简介：2020 年由 Vue 作者尤雨溪开发，基于 ESBuild（开发环境）​ 和 Rollup（生产环境），主打“极速开发体验”。

  2. 特色

    • 开发环境：浏览器原生ESM + esBuild => 极速开发体验
    • 生产环境：Rollup

  3. 解决问题

    • 痛点：
      1. 冷启动慢：需先打包整个应用（即使只改一行代码），耗时随项目规模线性增长；
      2. 热更新（HMR）慢：模块变更后需重新打包依赖链，大型项目更新延迟可达数秒。
    • 解决思路
      1. 开发环境：利用浏览器原生 ESM 能力，按需加载源码（无需打包），配合 esbuild 预构建依赖
      2. 生产环境：复用 Rollup 成熟的 Tree Shaking、代码分割和产物优化能力，输出高性能静态资源。

  4. 核心优势

    • 极速冷启动：开发环境无需打包，冷启动时间 <1 秒（大型项目也仅需几秒）
    • 毫秒级热更新：基于 ESM 的 HMR 仅更新变更模块，无需重建整个应用
    • 零配置开箱即用：内置对 Vue/React/Svelte/Preact 等框架的支持，自动处理 CSS 预处理器、静态资源、环境变量；
    • 生态兼容：兼容 Rollup 插件和部分 Webpack 插件，支持自定义插件扩展；
    • 生产构建优化：Rollup 输出精简代码，支持代码分割、压缩、预加载等。

  5. Vite 架构原理

    • 开发环境：ESM + esbuild 预构建

      1. 核心逻辑：浏览器直接加载源码（.vue/.tsx/.js），通过原生 ESM 解析依赖，仅对第三方依赖和高频小模块进行预构建（避免浏览器频繁请求）。
      2. 关键技术：

        • 原生 ESM 加载：Vite 启动开发服务器后，将源码中的 import语句转换为浏览器可识别的 ESM 路径（如 ./src/main.js→ /src/main.js?t=123），浏览器直接请求源码文件。

              // 源码中的 import
    import { createApp } from 'vue'; 
    // Vite 转换为（开发环境）
    import { createApp } from '/node_modules/.vite/deps/vue.js?v=xxx';

        • 依赖预构建（Optimized Dependencies）：第三方依赖（如 vue/react/lodash）通常以 CommonJS 格式发布，且可能存在大量小模块（如 lodash的子模块）。Vite 用 esbuild​ 将其预构建为 ESM 格式的单文件，并缓存到 node_modules/.vite目录，解决两个问题：

          1. 将 CommonJS 转 ESM，适配浏览器；
          2. 合并小模块，减少 HTTP 请求数。
          3. [预构建-触发时机]：首次启动、依赖变更（package.json或 vite.config.js修改）时自动执行。

        • esbuild 转译：用 esbuild 实时转译 TS/JSX/TSX 代码（速度比 Babel 快 10-100 倍），但不做类型检查（需配合 vue-tsc或 tsc --noEmit单独检查）。

          1. 实时转译：涉及到请求拦截

        • HMR 热更新：基于 ESM 的 import实现，当文件变更时，Vite 仅向浏览器推送变更模块的“更新通知”，浏览器重新请求新模块并替换，无需刷新页面。

          1. 怎么推送？？？
          2. 对 Vue/React 组件：通过框架自身的 HMR 能力（如 Vue 的 @vitejs/plugin-vue处理 .vue文件的热更新）；
          3. 对普通 JS/TS 文件：直接替换模块。

    • 生产环境：Rollup 打包

      1. 核心逻辑：生产环境需优化加载性能，Vite 用 Rollup​ 替代 esbuild 进行打包，利用 Rollup 的Tree Shaking（剔除未使用代码）和代码分割能力，输出更精简的产物。
        • Rollup 的优势：
          1. Tree Shaking 更彻底：基于 ES 模块的静态分析，精准识别未使用代码（esbuild 的 Tree Shaking 相对基础）；
          2. 代码分割更灵活：支持按动态导入（import()）自动拆分代码块，或手动配置 manualChunks；
          3. 产物格式丰富：支持 ESM、CJS、UMD 等，适配不同运行环境。
        • Vite 对 Rollup 的增强：
          1. 自动配置 Rollup：根据项目类型（Vue/React）自动生成 Rollup 配置（如处理 .vue文件、CSS 提取）；
          2. 扩展 Rollup 插件：内置 @vitejs/plugin-vue/@vitejs/plugin-react等插件，处理框架特有语法；
          3. 生产环境优化：默认开启代码压缩（esbuild 或 terser）、资源内联、预加载提示（preload/prefetch）。

  6. Vite 核心功能详解

    • 提供脚手架 create-vite, 支持快速初始化项目, 内置模板覆盖主流框架
    • 内置框架插件
      1. Vue：@vitejs/plugin-vue（支持 .vue单文件组件、Vue SFC 编译）
      2. React：@vitejs/plugin-react（支持 JSX、Fast Refresh 热更新）
      3. ...
    • 模块解析与资源处理
      1. 模块解析规则
        • 扩展名省略：导入时可省略 .js/.ts/.jsx/.tsx/.vue等扩展名，Vite 按顺序查找（resolve.extensions配置）；
        • 别名（Alias）：通过 resolve.alias 配置路径别名（如 @→ src），简化导入路径；
        • 外部依赖（External）：通过 build.rollupOptions.external排除无需打包的依赖（如 CDN 引入的库）。
      2. 静态资源处理
        • Vite 自动处理常见静态资源（图片、字体、JSON、SVG 等），支持多种引用方式：
          1. JS/TS 中导入：返回资源 URL（开发环境）或哈希文件名（生产环境）；
              import imgUrl from './logo.png'; // imgUrl → "/src/logo.png"（开发）/ "/assets/logo.8f3b.png"（生产）
          1. CSS 中引用：通过 url()引入，自动转为 base64（小文件）或哈希文件名（大文件，默认阈值 4KB）；
          2. HTML 中引用：直接写相对路径，Vite 会处理为绝对路径；
          3. Base64 内联：通过 ?url（强制 URL）、?raw（原始内容）、?inline（base64 内联）后缀控制； 
                import logoRaw from './logo.png?raw'; // 原始二进制数据（Uint8Array）
    import logoBase64 from './logo.png?inline'; // base64 字符串
      3. CSS 处理
        • Vite 内置 CSS 处理能力，支持预处理器、模块化、PostCSS、CSS 代码分割等：
          1. 预处理器支持: 自动识别 .scss/.sass/.less/.styl/.stylus文件，需安装对应预处理器依赖：
          2. CSS 模块化（CSS Modules）: 文件名以 .module.css/.module.scss结尾时，自动启用模块化（类名哈希化，避免冲突）
              import styles from './button.module.css';
    S// styles.button → "button_abc123"
          1. PostCSS 与 Autoprefixer
            • 默认集成 PostCSS，自动读取项目根目录的 postcss.config.js配置（需安装 autoprefixer等插件）：
          2. CSS 代码分割: 生产环境下，Vite 会将 CSS 提取为单独文件（通过 Rollup 插件 rollup-plugin-css-only），并通过 标签引入，避免 FOUC（样式闪烁）。
      4. JavaScript/TypeScript 处理
        • （1）ESNext 语法转译: 开发环境用 esbuild 转译 ESNext 语法（如箭头函数、可选链 ?.）为目标环境兼容的代码（通过 build.target配置，默认 modules: esnext，即保留 ESM 语法）；生产环境用 Rollup 转译（目标环境通过 build.target配置，如 es2020）。
        • （2）TypeScript 支持
          1. 无需单独配置：Vite 内置 esbuild转译 TS（仅擦除类型，不校验类型错误）；
          2. 类型检查：需配合 vue-tsc（Vue 项目）或 tsc --noEmit（React 项目）单独执行类型检查（可在 package.json中添加脚本） 
                {
        "scripts": {
            "type-check": "vue-tsc --noEmit" // Vue 项目
            // 或 "type-check": "tsc --noEmit" // React 项目
        }
    }
        • （3）JSX 支持
          1. React JSX：@vitejs/plugin-react自动处理 .jsx/.tsx文件，默认使用 React 17+ 的自动 JSX 运行时（无需手动导入 React）；
          2. Vue JSX：@vitejs/plugin-vue-jsx支持 Vue 的 JSX 语法（如 h函数或
avatar
文章
阅读
粉丝