• 售前

  • 售后

热门帖子
入门百科

Vite和Vue CLI的优劣

[复制链接]
银鲜目江探 显示全部楼层 发表于 2021-10-25 19:51:41 |阅读模式 打印 上一主题 下一主题
Vue 生态体系中有一个名为 Vite 的新构建工具,它的开辟服务器比 Vue CLI 快 10-100 倍。
这是否意味着 Vue CLI 已经过期了?在本文中,我将比力这两种构建工具,并分析它们的优缺点,以便你可以决定哪一种得当你的下一个项目。
Vue CLI 概述


大多数 Vue 开辟职员都知道,Vue CLI 是使用尺度构建工具和最佳实践设置快速建立基于 Vue 的项目的不可或缺的工具。
其主要功能包括:
      
  • 工程脚手架  
  • 带热模块重载的开辟服务器  
  • 插件体系  
  • 用户界面
在本讨论中必要注意的是,Vue CLI 是构建在 Webpack 之上的,因此开辟服务器和构建功能和性能都将是 Webpack 的超集。
Vite 概述


与 Vue CLI 雷同,Vite 也是一个提供根本项目脚手架和开辟服务器的构建工具。
然而,Vite 并不是基于 Webpack 的,它有本身的开辟服务器,使用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开辟服务器快了好几个数目级。Vite 接纳 Rollup 进行构建,速率也更快。
Vite 现在还处于测试阶段,看来 Vite 项目的目的并不是像 Vue CLI 那样的一体化工具,而是专注于提供一个快速的开辟服务器和根本的构建工具。
Vite 怎么这么快?


Vite 开辟服务器至少会比 Webpack 快 10 倍左右。对于一个根本的项目来说,与 2.5 秒相比,开辟构建/重新构建的时间相差 250ms。
在一个较大的项目中,这种差异会变得更加明显。Webpack 开辟服务器在构建/重新构建时可能会慢到 25-30 秒,有时甚至更慢。与此同时,Vite 开辟服务器可能会以恒定的 250ms 的速率为同一个项目提供服务。
这显然是开辟履历和游戏规则改变的差异,Vite 是如何做到这一点的?
Webpack 开辟服务器架构


Webpack 的工作方式是,它通过解析应用程序中的每一个 import 和 require ,将整个应用程序构建成一个基于 JavaScript 的捆绑包,并在运行时转换文件(例如 Sass、TypeScript、SFC)。
这都是在服务器端完成的,依靠的数目和改变后构建/重新构建的时间之间有一个大抵的线性关系。
Vite 开辟服务器架构


Vite 不捆绑应用服务器端。相反,它依靠于浏览器对 JavaScript 模块的原生支持(也就是 ES 模块,是一个比力新的功能)。
浏览器将在必要时通过 HTTP 哀求任何 JS 模块,并在运行时进行处理。Vite 开辟服务器将按需转换任何文件(如 Sass、TypeScript、SFC)。
这种架构避免了服务器端对整个应用的捆绑,并使用浏览器高效的模块处理,提供了一个明显更快的开辟服务器。
  1. 提示:当你对应用程序进行 code-split 和 tree-shake 动时,Vite 的速度会更快,因为它只加载它需要的模块,即使是在开发阶段。这与 Webpack 不同,在 Webpack 中,代码拆分只对生产包有利。
复制代码
Vite 的缺点


你可能已经明确了,Vite 的主要特点是它的开辟服务器快得离谱。
如果没有这个功能,可能就不会再讨论了,因为与 Vue CLI 相比,它确实没有其他的功能,而且确实有一些缺点。
由于 Vite 使用了 JavaScript 模块,所以最好让依靠关系也使用 JavaScript 模块。固然大多数当代 JS 包都提供了这一点,但一些老的包可能只提供 CommonJS 模块。
Vite 可以将 CommonJS 转换为 JavaSript 模块,但在一些边沿情况下它可能无法做到。固然,它还必要支持 JavaScript 模块的浏览器。
与 Webpack/Vue CLI 不同,Vite 无法创建针对旧版浏览器、web components 等的捆绑包。
而且,与 Vue CLI 不同,开辟服务器和构建工具是不同的体系,导致在生产与开辟中可能出现不划一的举动。
Vue CLI vs Vite 总结

      Vue CLI 优点      Vue CLI 缺点                  履历过战斗检验,可靠      开辟服务器速率与依靠数目成反比              与 Vue 2 兼容                    可以捆绑任何范例的依靠关系                    插件生态体系                    可以针对不同的目的进行构建   
      Vite 优点      Vite 缺点                  开辟服务器比 Webpack 快 10-100 倍      只能针对当代浏览器(ES2015+)              将 code-splitting 作为优先事项      与 CommonJS 模块不完全兼容                    处于测试阶段,仅支持 Vue 3                    最小的脚手架不包括 Vuex、路由器等                    不同的开辟服务器与构建工具   
Vite 的未来


固然上面的比力主要会集在 Vite 和 Vue CLI 的近况上,但仍有几点必要思量:
      
  • 仅当浏览器中的 JavaScript 模块支持得到改善时,Vite 才会有所改善。  
  • 随着 JS 生态体系的追赶,更多的软件包将支持 JavaScript 模块,减少 Vite 无法处理的边沿情况。  
  • Vite 仍处于测试阶段–功能可能会有变革。  
  • 有可能 Vue CLI 终极会结合 Vite,如许你就不消再使用此中一个了。
  1. 值得注意的是,Vite 并不是唯一一个利用浏览器中 JavaScript 模块的开发服务器项目。还有更著名的Snowpack,甚至可能会挤掉 Vite 的发展。时间会证明这一点
复制代码
以上就是Vite和Vue CLI的优劣的具体内容,更多关于Vite和Vue CLI的资料请关注草根技术分享别的相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作