西南IT社区
    • 注册
    • 登录
    • 搜索
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 工作机会
    • 活动
    • 项目

    浅谈Vite的优点

    极客生涯
    vue3 浅谈vite的优点
    1
    1
    107
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • Q
      q404256651 最后由 编辑

      Vite 非常非常快,对比 Vue-cli(基于 Webpack):

      1.1.jpg

      示例代码:Vue3 项目,10个组件

      测试两者的 dev 命令运行耗时相差十倍,且理论上,项目越大性能差距越大,为什么呢?最大的原因是 Vite 在开发模式下并没有做太多打包操作!

      Webpack 启动后会做一堆事情,经历一条很长的编译打包链条,从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化,最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码,这可满满都是 CPU、IO 操作啊,在 Node 运行时下性能必然是有问题。

      而 Vite 运行 Dev 命令后只做了两件事情,一是启动了一个用于承载资源服务的 service;二是使用 esbuild 预构建 npm 依赖包。之后就一直躺着,直到浏览器以 http 方式发来 ESM 规范的模块请求时,Vite 才开始“按需编译”被请求的模块。

      1.2.jpg

      Vite 的用法很简单。Vite 开箱就给你一堆功能,包括 css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR 等:这些功能,作者都按行业最佳实践预设好了,通常不需要用户介入做变更。

      1.3.jpg

      Vite特别简洁,它只是暴露了极少数的配置项与 plugin 接口,设计上就没打算让你做太多自定义操作,是因为 Vite 从一开始就没打算做成另一个 Webpack,而是做成一套“能够显著提升前端开发体验的前端构建工具”,重在 开发体验 啊同学们,Vite 可谓是用心良苦,想尽办法降低学习入门成本,它就不希望你为了使用工具又学一大堆复杂、缥缈的概念,希望这些事情都在框架层面屏蔽了 —— 虽然代价是丧失灵活性。

      简单说吧,Vite 定位就是傻瓜式但强大的构建工具,你专心写好业务代码,早点下班,不用再为了工具费神费力了。

      1 条回复 最后回复 回复 引用 1
      • First post
        Last post
      使用HTML构建办公软件 使用HTML构建办公软件 使用HTML构建办公软件
      Q
      成
      Y
      洋
      书
      Y
      D
      U
      Y
      娇
      玩
      1
      光
      A
      庆
      小
      U
      Y
      L
      I
      Z
      I
      Y
      C
      Z

      西南地区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
      西藏
      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      ©2019-2021 滇ICP备20006698号