这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天，今天学习的是Vite知识体系，将学习的内容记录下来，以便时时巩固记忆。

学习内容

• 什么是Vite
• Vite上手使用
• Vite整体架构
• Vite进阶路线

什么是Vite

Vite， 一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

Vite作为新一代前端构建工具，由两大部分组成：No-bundle开发服务，源文件无需打包和生产环境基于Rollup的Bundler活动。具有高性能(dev启动速度和热更新速度非常快)和简单易用、开发者体验好的核心特征。

Vite上手使用

支持的模板预设包括：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts

启动：

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Vite整体架构

关键技术：

• 依赖预打包
• 单文件编译
• 代码压缩
• 插件机制

依赖预打包：

避免node_modules过多的文件请求，将CommonJS格式转换为ESM格式。’

单文件编译：

优势：编译速度提升10-100x

局限性：1、不支持类型检查 2、不支持语法降级到ES5

代码压缩：

Esbuild作为默认压缩工具，替代传统的Terser、Uglify.js等压缩工具。

插件机制：

• 开发环境 模拟Rollup插件机制
• 生产环境 直接使用Rollup

Vite进阶路线

如何语法安全降级：

1、上层解决方案： @vitejs/plugin-legacy

2、底层原理：

借助Babel进行语法自动降级

提前注入Polyfill实现，如core-js、regenerator-runtime