Vite 学习笔记(二):Vite相对于Webpack的优势与Vite脚手架

webpack的工作流程

webpack构建项目会根据资源模块的依赖关系构建依赖图,根据依赖图去加载/处理各种文件。

而当我们的项目越来越大的时候,需要处理的JavaScript代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于JavaScript开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。此时 webpack 构建项目时的构建速度服务器的启动就会非常慢。

因为webpack为了支持多种模块化进行了统一的模块化处理。(webpack考虑的是兼容性的问题(浏览器端 + 服务端)

webpack 构建流程的示意图如下:

Vite 为什么比 webpack 快

首先我们要明白webpack应该是为了兼容性的考虑,所以webpack支持多种模块化,但是vite只是支持ESM规范,所以此时不需要去遍历依赖图文件了,进而问题就得到了解决

Vite 工作示意图如下:

webpack需要把所有的文件、依赖文件统统打包成Bundle之后,才会去启动Server,而vite一开始就启动Server,然后按需加载各种文件的。

所以基于这种特性,Vite 相较于 webpack 来说会更快

create-vite、vite、create-vue之间的区别

create-vitecreate-vue本身都是创建了一个快捷工程化项目,我们称之为clicreate-vite能够提供React等框架的模板,create-vue只是针对于vue3所存在的一个cli,他们都是基于vite来创建服务器、打包的。

总结

vite能够跟webpack一样,能够实现资源模块的打包加载,但是vite相比于webpack确实轻量了不少,他解决了webpack遍历依赖文件的问题,换句话说webpack考虑的是兼容性的问题(浏览器端 + 服务端),而vite考虑的是浏览器端的资源文件加载

相关推荐
belldeep1 天前
nodejs:Vite + Svelte + ts 入门示例
typescript·node.js·ts·vite·svelte
发现一只大呆瓜5 天前
深入浅出 AST:解密 Vite、Babel编译的底层“黑盒”
前端·面试·vite
发现一只大呆瓜5 天前
前端模块化:CommonJS、AMD、ES Module三大规范全解析
前端·面试·vite
墨鱼笔记5 天前
前端必看:Vite.config.js 最全配置指南 + 实战案例
前端·vite
问道飞鱼5 天前
【前端知识】使用React+Vite构建企业级项目模板
前端·react.js·前端框架·vite
晓得迷路了6 天前
栗子前端技术周刊第 121 期 - Vitest 4.1、Nuxt 4.4、Next.js 16.2...
前端·javascript·vite
朱建伟7 天前
大神尤雨溪再次出手,前端工具链整合--该文章是对vite plus官方README文档进行了翻译
前端·vite
阿帕琪尔8 天前
😎vite插件: 自动打包压缩图片和转webp(二)
前端·vite
踩着两条虫8 天前
AI 驱动的 Vue3 应用开发平台 深入探究(十九):CLI与工具链之Create VTJ CLI 参考
前端·ai编程·vite
ん贤9 天前
首屏优化实践:如何将 Vue3 + Vite 项目的加载速度提升3倍
性能优化·vue·vite