vite与webpack的区别
【摘要】 记录一下vite构建工具与webpack的区别 打包原理比较 原理图示 vite原理简述 vite的改进点 vite缺点 参考资料 打包原理比较打包过程原理webpack识别入口->逐层识别依赖->分析/转换/编译/输出代码->打包后的代码逐级递归识别依赖，构建依赖图谱->转化AST语法树->处理代码->转换为浏览器可识别的代码vite-基于浏览器原生 ES module，利用浏览器解析 i...
记录一下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和代码分割不够友好
- 没被大规模重度使用，会隐藏一些问题
参考资料
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）