vite和webpack

Vite构建工具

vite对比webpack

一:打包原理

1：webpack打包过程

识别入口文件---》逐层识别模块依赖----》分析代码---》编译代码---》输出代码---》打包完成

2:   vite打包过程

逐级递归识别依赖---》构建依赖图谱---》转化AST语法树---》处理代码---》转换为浏览器可识别的代码

index.html声明<script>标签类型为"module"，浏览器向服务器发起Get，请求到main.js，检测内部含有import引用发起http请求获取模块的内容文件。劫持浏览器的http请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)

webpack原理图示：

vite原理图示：

 

 

二：vite优缺点

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

1：预构建

预构建 它们可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。

2：ESbuild

超快的构建速度，并且不需要缓存。

  支持es6和commonjs（是一种模块规范，最初被应用于 nodejs，成为 nodejs的模块规范）

  支持es6的tree shaking（是一种通过清除多余代码方式来优化项目打包体积的技术）

支持go,javascript的api

支持typescript,jsx等语法编译

支持sourcemap

支持代码压缩

3：HMR

Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue 单文件组件（SFC） 和 React Fast Refresh 中。

 

 

 

 

 

缺点：

默认情况下，无论是 dev 还是 build 都会直接打出 ESM 版本的代码包，这就要求客户浏览器需要有一个比较新的版本，这放在现在的国情下还是有点难度的。

不过 Vite 同时提供了一些弥补的方法，使用 build.polyfillDynamicImport 配置项配合 @vitejs/plugin-legacy 打包出一个看起来兼容性比较好的版本，我相信这一点会随时间慢慢被抹平。

三：配置不同点

1. index.htm      

声明 script 标签类型为 module

 

1. router/index.js

 

 

1. vite.config.js

 

1. package.json