本文介绍了为何选择vite而非webpack来创建Vue3项目，详细阐述了vite的快速启动优势，包括esbuild的使用，以及与webpack在启动时间和模块处理上的对比。还提供了创建Vue3项目的具体步骤，包括使用命令行工具和VSCode的启动方法，最后给出了官方文档链接以供深入学习。
目录
说明：这里创建的是vue3+vite项目
为什么使用vite
与webpack相比较，vite启动更快速。
webpack和vite的比较
分析说明
Vite使用的是esbuild 预构建依赖，esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快。
webpack启动时会分析依赖关系，接着编译打包，最后才交给本地服务器进行渲染。所以项目模块越多，依赖越多，启动越慢。
即使使用模块热更新（HMR），也会随着模块变多，造成的打包文件bundle体积变大，从而拖慢响应速度。
vite启动时会先启动开发服务器，请求模块时也会按需动态编译显示。
因为现代浏览器本身支持ES-Module，所以会自动向依赖的Module发出请求。
所以vite就将开发环境下的模块文件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器
总结来说就是vite在启动时需要将文件打包成bundle文件，因此不需要分析模块之间的依赖关系，只在需要时对某个模块内容进行编译。
当改动某个模块时，也不需要像webpack那样将该模块以及依赖的模块都编译一次，所以热更新效率也会更高。
官网上webpack和vite启动流程图
webpack:
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
