vite
- 开发环境构建速度很快，不会说扫描全部的文件，而是单纯启动一个http服务器，然后按照import链去加载文件，自带懒加载和按需加载，越是复杂的项目反而开发体验更好，但是不一定整体项目用户使用体验好
- 定点定文件热更新
以上两点可以通过观察network去看出来：
vite是按照编写时候的文件加载的，第三方库和对应的js/vue等等都会自动按照文件加载;
webpack如果不配置的话会vue入口自动打包成一个bundle文件，该文件包括在此刻才按需引入的第三方库，剩下全局引用的第三方库分在chunk-vendors.js，代码执行文件放入app.js
- 按照hash值打包，打包文件进行错误定位的时候不太友好。
- 自带很多配置，多入口的时候更是配置简单，但是相对应社区生态配置不够灵活和定制化，兼容性有所缺陷，比如旧浏览器和微前端等复杂场景，而且打包固定按照contentHash去识别，而且不太好实现手动的代码分割策略，很多时候都是自动使用vite自带的一套策略
- 打包引擎用的rollup，所以tree-shaking更彻底，所以打包总体积往往更小，但不代表首屏加载文件体积更小
webpack：
- 开发环境就会进行打包，导致耗时很慢
- 热更新不灵活，热更新需要重编译打包bundle耗时会更长
- 打包可以自定义名字，对于错误定位很友好
- 可以实现高度定制化，兼容性好，同时意味着很多东西原生不自带需要手动配置，比如多入口的时候可能需要配置很多的重复变动操作（每个入口都需要配置一遍），很多配置也因此比较灵活
- 打包引擎就是webpack，tree-shaking可能不是很彻底，特别是对于现代浏览器端用的多的es模块比vite劣势
- webpack5自带模块联邦，对微前端场景很友好
前端构建工具Webpack、Rollup、esbuild和SWC的区别前端构建工具Webpack、Rollup、esbu - 掘金 (juejin.cn)
