Vite快速入门

什么是Vite

Vite是Vue的作者尤雨溪在开发Vue3.0的时候开发的一个Web开发构建工具。由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

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

Vite的优势

速度快

Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，涉及很多 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。

而 Vite 运行 Dev 命令后只做了两件事情，一是启动了一个用于承载资源服务的 service；二是使用 esbuild 预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“按需编译”被请求的模块。

这里 Vite 预设的前提是：

• 现代浏览器大多数已经原生支持 ESM 规范，构建工具 —— 特别是开发环境下已经没有太大必要为了低版本兼容把大量的时间花在编译打包上了。

这么一对比，Webpack 是啥都做了，浏览器只要运行编译好的低版本(es5)代码就行；而 Vite 只处理问题的一部分，剩下的事情交由浏览器自行处理，那速度必然很快。

除了启动阶段跳过编译操作之外，Vite 还有很多值得一提的性能优化，整体梳理一下：

• 预编译：npm 包这类基本不会变化的模块，使用 Esbuild 在 预构建 阶段先打包整理好，减少 http 请求数
• 按需编译：用户代码这一类频繁变动的模块，直到被使用时才会执行编译操作
• 客户端强缓存：请求过的模块会被以 http 头 max-age=31536000,immutable 设置为强缓存，如果模块发生变化则用附加的版本 query 使其失效
• 产物优化：相比于 Webpack ，Vite 直接锚定高版本浏览器，不需要在 build 产物中插入过多运行时与模板代码
• 内置更好的分包实现：不需要用户干预，默认启用一系列智能分包规则，尽可能减少模块的重复打包
• 更好的静态资源处理：Vite 尽量避免直接处理静态资源，而是选择遵循 ESM 方式提供服务，例如引入图片 import img from 'xxx.png' 语句，执行后 img 变量只是一个路径字符串。

实现原理

ESBuild

ESBuild 是基于Go语言开发的JavaScript Bundler, 它的构建速度是 webpack 的几十倍。由Figma前CTO Evan Wallace开发，并且也被Vite用于开发环境的 依赖解析和Transform.

ESBuild的实现

• 由Go实现并编译成本地代码：多数Bundler都是由JavaScript实现的,但是CLI应用对于JIT编译语言来说是性能表现最不好的。每次运行Bundler的时候,JS虚拟机都是以第一次运行代码的视角来解析Bundler(比如Webpack)的代码,没有优化信息.当ESBuild在解析JavaScript的时候，Node还在解析Bundler的JS代码

• 重度使用并行计算: Go语言本身的设计就很重视并行计算,所以ESBuild对这一点会加以利用.在构建中主要有三个环节: 解析(Parsing),链接(Linking)和代码生成(Code generation),在解析和代码生成环节会尽可能使用多核进行并行计算

• ESBuild中的一切代码从零实现:通过自行实现所有逻辑来避免第三方库带来的性能问题,统一的数据结构可以减少数据转换开销,并且可以根据需要改变架构,当然最大的缺点就是工作量倍增.