记录一下vite构建工具与webpack的区别
打包原理比较
| 打包过程 | 原理 | |
|---|---|---|
| webpack | 识别入口->逐层识别依赖->分析/转换/编译/输出代码->打包后的代码 | 逐级递归识别依赖，构建依赖图谱->转化AST语法树->处理代码->转换为浏览器可识别的代码 |
| vite | - | 基于浏览器原生 ES module，利用浏览器解析 imports，服务器端按需编译返回 |
原理图示
| vite | webpack |
|---|---|
 |  |
vite原理简述
- 声明 script 标签类型为 module
<script type="module" src="/src/main.js"></script>- 浏览器向服务器发起GET
请求到main.js文件，检测内部含有import引入的包，会对内部的 import 引用发起 HTTP 请求获取模块的内容文件// 请求main.js文件： http://localhost:3000/src/main.js // /src/main.js: import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')- 劫持浏览器的http请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)
vite的改进点
| webpack缺点 | vite改进点 |
|---|---|
| 服务器启动缓慢 | 将应用模块区分为依赖 和 源码 两类;使用esbuild构建;在浏览器请求源码时进行转换并按需提供源码 |
| 基于nodejs | esbuild(Go 编写) 预构建依赖，比node快 10-100 倍 |
| 热更新效率低下;编辑单个文件会重新构建整个包;HMR 更新速度随规模增大下降 | HMR基于原生 ESM 上，更新速度与应用规模无关;利用http2的缓存+压缩优势 |
vite缺点
- 生态不及webpack，加载器、插件不够丰富
- 生产环境esbuild构建对于css和代码分割不够友好
- 没被大规模重度使用，会隐藏一些问题
