vite 下一代前端开发与构建工具

vite 下一代前端开发与构建工具

[TOC]

vite是什么

Vite是一种新型的前端构建工具，是尤雨溪在开发Vue3.0的时候诞生的。类似于webpack+webpack-dev-server。利用浏览器ESM特性导入组织代码，在服务端按需编译返回，完全跳过了打包这个概念；而生产环境则是利用Rollup作为打包工具，号称是下一代的前端构建工具。

• 极速的服务启动使用原生的ESM文件，无需打包
• 轻量快速的热重载无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 丰富的功能对 TypeScript、JSX、CSS 等支持开箱即用。
• 优化的构建可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 通用的插件在开发和构建之间共享 Rollup-superset 插件接口。
• 完全类型化的API灵活的 API 和完整的 TypeScript 类型。

我们为什么需要vite

传统的打包工具如Webpack是先解析依赖、打包构建再启动开发服务器，Dev Server 必须等待所有模块构建完成，当我们修改了 bundle模块中的一个子模块， 整个 bundle 文件都会重新打包然后输出。项目应用越大，启动时间越长。

vite是怎么做的

Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

• 依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。

  Vite 将会使用 esbuild 预构建依赖（处理CommonJs和UMD兼容性、合并http请求性能优化）。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

前置知识

ESM

在了解Vite之前，需要先了解下ESM，不同于之前的CJS，AMD，CMD等等，ESM提供了更原生以及更动态的模块加载方案，最重要的就是它是浏览器原生支持的，也就是说我们可以直接在浏览器中去执行import，动态引入我们需要的模块，而不是把所有模块打包在一起。

使用方式

<script type="module"> import message from './message.js'
  console.log(message) // hello world </script> 

也就是说 浏览器可以通过 <script type="module"> 的方式和 import 的方式加载标准的 ES 模块

而且 模块只会执行一次并且默认为defer也支持async

传统的<script>如果引入的JS文件地址是一样的，则JS会执行多次。但是，对于type="module"的<script>元素，即使模块地址一模一样，也只会执行一次。例如：

<!-- 1.mjs只会执行一次 -->
<script type="module" src="1.mjs"></script>
<script type="module" src="1.mjs"></script>
<script type="module">import "./1.mjs";</script>
<!-- 下面传统JS引入会执行2次 -->
<script src="2.js"></script>
<script src="2.js"></script> 

esbuild

Vite底层使用Esbuild实现对.ts、jsx、.js代码文件的转化，所以先看下什么是es-build。

esbuild 号称是新一代的打包工具，提供了与Webpack、Rollup、Parcel 等工具相似的资源打包能力，但在时速上达到10～100倍的差距，耗时是Webpack