浅谈Vite的优点
-
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 定位就是傻瓜式但强大的构建工具,你专心写好业务代码,早点下班,不用再为了工具费神费力了。
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏