vite与webpack的区别
# 打包原理比较
打包过程 | 原理 | |
|---|---|---|
webpack | 识别入口->逐层识别依赖->分析/转换/编译/输出代码->打包后的代码 | 逐级递归识别依赖，构建依赖图谱->转化AST语法树->处理代码->转换为浏览器可识别的代码 |
vite | - | 基于浏览器原生 ES module，利用浏览器解析 imports，服务器端按需编译返回 |
# 原理图示
vite | webpack |
|---|---|
# vite原理简述
- 声明 script 标签类型为 module
<script type="module" src="/src/main.js"></script>- 浏览器向服务器发起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')- 劫持浏览器的http请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)
# vite的改进点
webpack缺点 | vite改进点 |
|---|---|
服务器启动缓慢 | 将应用模块区分为依赖 和 源码 两类;使用esbuild构建;在浏览器请求源码时进行转换并按需提供源码 |
基于nodejs | esbuild(Go 编写) 预构建依赖，比node快 10-100 倍 |
热更新效率低下;编辑单个文件会重新构建整个包;HMR 更新速度随规模增大下降 | HMR基于原生 ESM 上，更新速度与应用规模无关;利用http2的缓存+压缩优势 |
# vite缺点
- 生态不及webpack，加载器、插件不够丰富
- 生产环境esbuild构建对于css和代码分割不够友好
- 没被大规模重度使用，会隐藏一些问题
# 参考资料
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-05-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录