Vite2.0发布，Webpack等模块化编译打包的时代要结束了吗？
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
1
2
3
4
如果使用 yarn：
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
1
2
3
4
目录结构
运行
npm run dev
1
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越来越好
————————————————
版权声明：本文为CSDN博主「文化沙漠麦七」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42783654/article/details/116013270