Vite2.0发布，Webpack等模块化编译打包的时代要结束了吗？

Vite号称下一代前端开发工具，噱头大还是真的有能力？之前就一直听说Vite那里好那里好，像极了别人家的孩子，今年2月Vite2.0发布，Vite时代拉开序幕

Vite是什么？

Vite 官方中文文档：https://cn.vitejs.dev/guide

Vite (法语意为 “快速的”，发音 /vit/) 是尤雨溪开发的一种新型前端构建工具，它基于原生ES模块提供了 丰富的内建功能。

• 开发环境下使用模块热更新（HMR），项目随启随用，即时更新。
• 生产环境下，它使用 Rollup 打包，并且它是预配置的，可以输出优化过的静态资源。显著提升前端开发体验。

为什么生产环境仍需打包?
尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。

要确保开发服务器和产品构建之间的最佳输出和行为一致并不容易。所以 Vite 附带了一套 预配置、预优化 的 构建命令，开箱即用。

为何不用 ESBuild 打包？
虽然 esbuild 快得惊人，并且已经是一个在构建库方面比较出色的工具，但一些针对构建 应用 的重要功能仍然还在持续开发中 —— 特别是代码分割和 CSS 处理方面。就目前来说，Rollup 在应用打包方面更加成熟和灵活。尽管如此，当未来这些功能稳定后，我们也不排除使用 esbuild 作为生产构建器的可能。

特点：

• 即时服务器启动
• 闪电快HMR
• 丰富特征
• 优化建造
• 通用插件接口
• 全类型API

对比Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，通过编译打包显示，项目越大构建加载越慢

vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载

对比Snowpack

Snowpack也是一个与 Vite 十分类似的非构建式原生 ESM 开发服务器。除了不同的实现细节外，这两个项目在技术上比传统工具有很多共同优势。Vite 的依赖预绑定也受到了 Snowpack v1（现在是 esinstall）的启发。这两个项目之间的一些主要区别是：

• Snowpack 的默认构建输出是未打包的：它将每个文件转换为单独的构建模块，然后将这些模块提供给执行实际绑定的不同“优化器”。这么做的好处是，你可以选择不同终端打包器，以适应不同需求（例如 webpack, Rollup，甚至是 ESbuild），缺点是体验有些支离破碎。

• Vite 选择了与单个打包器（Rollup）进行更深入的集成。Vite 还支持一套 通用插件 API 扩展了 Rollup 的插件接口，开发和构建两种模式都适用。

这里我就不多说了，看看 官方怎么说？

使用Vite

Vite 官方目前提供了一个比较简单的脚手架：create-vite-app，可以使用这个脚手架快速创建一个使用 Vite 构建的 Vue.js 应用

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

如果使用 yarn：

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

目录结构

运行

npm run dev

u1s1，快是真的快

ESM方式

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

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小。

打开f12看一下来源文件

Vue文件都出现了两个同名文件，一个带?type=template后缀
这是因为vue被解析成render函数返回给浏览器渲染页面

request URL：http://localhost:3000/src/App.vue

koa中间件检测到请求的是vue模板文件，则会在请求后面添加一个type=template参数

变成：http://localhost:3000/src/App.vue?type=template
koa

通过这个参数来判断是请求vue模板文件，并编译成js文件返回给浏览器，浏览器使用get按需请求模式。

写在最后

这样看来Vite确实是有实力取代Webpack的，不过目前还在慢慢成熟的阶段，开发者使用的还比较少，Vue3项目使用居多，目前也提供 React Fast Refresh 支持，就像作者说的，一旦你体验到 Vite 有多快，我们十分怀疑你是否愿意再忍受像曾经那样使用打包器开发。确实是把我震撼到了，同时也希望越来越多开发者认识和使用Vite，祝Vite越来越好