vite和webpack的区别

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

当声明一个 script标签类型为 module 时,如

当浏览器解析资源时，会往当前域名发起一个GET请求main.js文件
// main.js
import { createApp } from ‘vue’
import App from ‘./App.vue’
createApp(App).mount(‘#app’)
请求到了main.js文件，会检测到内部含有import引入的包，又会import 引用发起HTTP请求获取模块的内容文件，如App.vue、vue文件
Vite其核心原理是利用浏览器现在已经支持ES6的import,碰见import就会发送一个HTTP请求去加载文件，Vite启动一个 koa 服务器拦截这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再以ESM格式返回返回给浏览器。Vite整个过程中没有对文件进行打包编译，做到了真正的按需加载，所以其运行速度比原始的webpack开发编译速度快出许多！

而Vite利用浏览器对ESM的支持，当 import 模块时，浏览器就会下载被导入的模块。先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。灰色部分是暂时没有用到的路由，所有这部分不会参与构建过程。随着项目里的应用越来越多，增加route，也不会影响其构建速度。

将script标签设置type=“module” 加载模块 import引入方式。

1. 打包更快 增量更新（webpack 全量更新 查找依赖）
2. 编译原理不同 在浏览器端按需编译 我打包过程（webpack 编译后进行打包）
3. 插件生态更小
4. 场景不同 小项目更适合 （webpack 大项目）
5. 热更新速度不随项目变大变慢
6. 配置更少 容易上手

核心流程

Vite整个热更新过程可以分成四步

创建一个websocket服务端和client文件，启动服务
通过chokidar监听文件变更
当代码变更后，服务端进行判断并推送到客户端

相关

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

Esbuild是一个JavaScript`` Bundler 打包和压缩工具，它提供了与Webpack、Rollup等工具相似的资源打包能力。可以将JavaScript 和TypeScript代码打包分发在网页上运行。但其打包速度却是其他工具的10～100倍。

目前他支持以下的功能：

加载器
压缩
打包
Tree shaking
Source map生成
esbuild总共提供了四个函数：transform、build、buildSync、Service。有兴趣的可以移步官方文档了解。

Rollup
在生产环境下，Vite使用Rollup来进行打包

Rollup是基于ESM的JavaScript打包工具。相比于其他打包工具如Webpack，他总是能打出更小、更快的包。因为 Rollup 基于 ESM 模块，比 Webpack 和 Browserify 使用的 CommonJS模块机制更高效。Rollup的亮点在于同一个地方，一次性加载。能针对源码进行 Tree Shaking(去除那些已被定义但没被使用的代码)，以及 Scope Hoisting 以减小输出文件大小提升运行性能。

Rollup分为build（构建）阶段和output generate（输出生成）阶段。主要过程如下：

获取入口文件的内容，包装成module，生成抽象语法树