这是我参与

「第四届青训营」笔记创作活动的第10天

Vite是什么

新一代的项目构建工具，Vite 意在提供开箱即用的配置，目的是为了解决包含大量模块的项目启动缓慢，反馈迟钝的问题

• 源文件无需打包
• 生产环境基于Rollup的Bundler

主要组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

使用Vite

初始化方式:

• npm init vite
• pnpm create vite
• yarn create vite

启动：

初始化后进入项目文件夹，安装依赖，运行 dev

Vite运行时

Vite工具初始化的网页界面(稍微修改了内容)

Vite整体架构

包括Development（开发环境）和 Production（生产环境），依靠许多优质量插件提高运行效率，方便使用

Development：

• 预打包（为了提高开发效率，避免过度node_modules文件请求）
  • 使用Esbuild进行预打包，编译TS/JSX
    • 不支持类型检查
    • 不支持语法降级
  • 实现原理
    • 服务启动前扫描代码中的依赖
    • 用Esbuild对依赖代码进行预打包
    • 改写import语句，指定依赖为预构建产物路径

Production：

代码压缩（减少资源文件体积，客户端能更快速的使用）
直接使用Rollup ，ESbuild为默认的压缩工具