记录一下vite构建工具与webpack的区别

• 打包原理比较
• 原理图示
• vite原理简述
• vite的改进点
• vite缺点
• 参考资料

打包原理比较

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

原理图示

vite	webpack

vite原理简述

• 1. 声明 script 标签类型为 module

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

• 2. 浏览器向服务器发起GET

  
  // 请求main.js文件：
  http://localhost:3000/src/main.js
  
  // /src/main.js:
  import { createApp } from 'vue'
  import App from './App.vue'
  createApp(App).mount('#app')
  

  请求到main.js文件，检测内部含有import引入的包，会对内部的 import 引用发起 HTTP 请求获取模块的内容文件
• 3. 劫持浏览器的http请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)

vite的改进点

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

vite缺点

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

参考资料

• Vite 官方中文文档 (opens new window)