vite入门笔记

vite 由两部分组成：

• 开发服务器，支持原生ES模块，服务器启动，热更新（HRM）的速度更快。

  • vite 通过将应用中的模块区分为 依赖 和 源码两类。
    • 对于依赖，大多是不会变动的纯js，vite 是会使用esbuild 预构建依赖（它使用Go编写，速度快）
    • 对于源码，通常是一些需要转换的非js文件（如 JSX，CSS，Vue等），时长被编辑。vite 以 原生ESM方式提供源码，只需要在浏览器请求源码时进行转换并按需提供源码。
  • 在vite中，HMR 是在原生ESM上执行的，当编辑一个文件时，vite 只需使已编辑的模块与其最近的HRM边界之间的链 失活，所有无论应用大小如何，HMR 始终能保持快速更新。
  • vite 也会使用http头来加速整个页面的重新加载。
    • 源码模块的请求，会 根据 304 Not Modified 进行协商缓存。
    • 依赖模块请求，则 设置请求头Cache-Control:max-age=31536000,immutable 进行 强制缓存。

• 一套构建指令，使用Rollup打包代码，可输出用于生产环境的高度优化过的静态资源。

服务器启动，更新 为什么缓慢？

在浏览器支持ES模块之前，需要我们对源码进行”打包”，使用工具抓取、处理并将源码模块串联成可以在浏览器运行的文件。所有随着项目体积的增长，每次”打包”时间也越来越久，更新的时间也随之增长。

npm依赖解析和预构建

原生ES导入不支持裸模块导入import { someMethod } from 'some-dep', 在浏览器中会抛出一个错误。vite 会检测到所有被加载的源文件中此类裸模块导入，并执行如下操作：

• 预构建，将 CommonJS / UMD 转换为ESM格式
• 重写导入为合法的URL， 如/node_modules/.vite/some-dep.js?v=f2123d223,以便浏览器能够正确导入它们

模块热重载 HMR

vite 提供已一套 原生 ESM 的HRM API，具有HRM 功能的框架可以利用该API提供即使更新，而无需重新加载页面。vite 内置了HMR 到 Vue 单文件组件和 React Fast Refresh中

Tyscript

• vite 天然支持引入 .ts文件，但 vite 仅执行.ts文件的转义工作，并不执行或任何类型检查，需要IDE或在构建过程中进行类型检查。如在构建脚本中 使用 tsc --noEmit
• vite 使用 esbuild 将 ts 转义到 js，比 tsc快很多

客户端类型

vite 默认的类型定义是写给它的Node.js API的，要将其补充到一个 vite 应用客户端代码环境中，添加一个d.ts声明文件，可提供以下类型定义补充：

• 资源导入 (例如，导入一个.vue、.svg文件)
• import.meta.env 上 vite 注入的环境变量的类型定义
• import.meta.hot上的 HMR API 类型定义

/// <reference types="vite/client" />

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

CSS

• 导入.css文件其内容会被插入到<style>标签中，同时也带有HRM支持。
• @import 内联和变基，vite 通过 postcss-import 预配置支持了CSS@import内联， vite 的路径别名也遵从css @import