Vite 非常非常快,对比 Vue-cli(基于 Webpack):
示例代码:Vue3 项目,10个组件
测试两者的 dev 命令运行耗时相差十倍,且理论上,项目越大性能差距越大,为什么呢?最大的原因是 Vite 在开发模式下并没有做太多打包操作!
Webpack 启动后会做一堆事情,经历一条很长的编译打包链条,从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化,最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码,这可满满都是 CPU、IO 操作啊,在 Node 运行时下性能必然是有问题。
而 Vite 运行 Dev 命令后只做了两件事情,一是启动了一个用于承载资源服务的 service;二是使用 esbuild 预构建 npm 依赖包。之后就一直躺着,直到浏览器以 http 方式发来 ESM 规范的模块请求时,Vite 才开始“按需编译”被请求的模块。
Vite 的用法很简单。Vite 开箱就给你一堆功能,包括 css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR 等:这些功能,作者都按行业最佳实践预设好了,通常不需要用户介入做变更。
Vite特别简洁,它只是暴露了极少数的配置项与 plugin 接口,设计上就没打算让你做太多自定义操作,是因为 Vite 从一开始就没打算做成另一个 Webpack,而是做成一套“能够显著提升前端开发体验的前端构建工具”,重在 开发体验 啊同学们,Vite 可谓是用心良苦,想尽办法降低学习入门成本,它就不希望你为了使用工具又学一大堆复杂、缥缈的概念,希望这些事情都在框架层面屏蔽了 —— 虽然代价是丧失灵活性。
简单说吧,Vite 定位就是傻瓜式但强大的构建工具,你专心写好业务代码,早点下班,不用再为了工具费神费力了。