vite与webpack的区别

# 打包原理比较

	打包过程	原理
webpack	识别入口->逐层识别依赖->分析/转换/编译/输出代码->打包后的代码	逐级递归识别依赖，构建依赖图谱->转化AST语法树->处理代码->转换为浏览器可识别的代码
vite	-	基于浏览器原生 ES module，利用浏览器解析 imports，服务器端按需编译返回

# 原理图示

vite	webpack

# vite原理简述

1. 声明 script 标签类型为 module

代码语言：javascript复制

<script type="module" src="/src/main.js"></script>

1. 浏览器向服务器发起GET

代码语言：javascript复制

// 请求main.js文件：
http://localhost:3000/src/main.js

// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

1. 劫持浏览器的http请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)

# vite的改进点

webpack缺点	vite改进点
服务器启动缓慢	将应用模块区分为依赖 和 源码 两类;使用esbuild构建;在浏览器请求源码时进行转换并按需提供源码
基于nodejs	esbuild(Go 编写) 预构建依赖，比node快 10-100 倍
热更新效率低下;编辑单个文件会重新构建整个包;HMR 更新速度随规模增大下降	HMR基于原生 ESM 上，更新速度与应用规模无关;利用http2的缓存 压缩优势

# vite缺点

• 生态不及webpack，加载器、插件不够丰富
• 生产环境esbuild构建对于css和代码分割不够友好
• 没被大规模重度使用，会隐藏一些问题

# 参考资料

• Vite 官方中文文档

webpack javascript 打包 node.js 编程算法

0 人点赞