Vite|Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗()

本文完整版:《Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗》
尤雨溪在发布 Vite 之后写了一条推,感觉不会在用 webpack 了(Vue-cli 基于 Webpack 开发,并配置了 Webpack 打包规则),Sean 是 Webpack 核心开发者,会一些中文,在尤大这条下面直接感叹。
Vue-cli 一直是 Vue 2 默认官方脚手架工具,Vue-cli 基于 Webpack 开发。Vue 3 发布后,尤大同时发布了 Vite ,那么 Vue 3 同时有两个前端打包工具 Vite 和 Vue CLI,那么他们俩应该怎么选呢?
一、Vite 与 Vue CLI 是什么? Vue CLI 的特点
【Vite|Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗()】Vue 开发者应该无人不知 Vue CLI,他是 Vue 2 最棒的前端构建工具,Vue CLI 基于 Webpack 之上,是 Webpack 的超集。

  • Vue CLI 基于 Webpack 构建,配置好了打包规则
  • 内置热模块重载的开发服务器
  • 有丰富的官方插件合集,站在 webpack 庞大的社区资源上
  • 友好的图形化创建和管理 Vue 项目界面
Vite|Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗()
文章图片

Vue cli 在服务启动之前,要把所有代码打包成 Bundle 再启动服务。这就是为什么启动一些大型项目时,特别慢的原因。这一点上 Vite 做了大幅改善。
Vite 的特点
Vite 是 Vue 团队开发的新一代前端开发与构建工具,Vite 不是基于 Webpack 开发的,他为了解决服务启动慢的问题,Vite 通过一开始将应用中的模块区分为依赖和源码两类,改进了开发服务器启动时间。
  • 依赖:大多为在开发时不会变动的纯 JavaScript。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化格式。Vite 会使用 esbuild 预构建依赖。esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
  • 源码:通常包含一些并非直接是 JavaScript 的文件,需要转换,时常会被编辑。同时,并不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块)。
综上,这就是为什么 Vite 启动快的原因。
二、Vite 和 Vue Cli 区别 Vite 是基于原生 ES6 Modules,在生产环境下打包使用的是 Rollup。vue-cli 基于 webpack 封装,生产环境和开发环境都是基于 Webpack 打包。所以两者在生产环境下都是基于源代码文件打包。但在开发环境中,两者有所不同。Vite 在开发环境下,基于原生 ES6 ,无需对代码进行打包,浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能,省掉了打包过程,在开发环境中体验及其愉快。
三、Vite 会取代 vue-cli 吗?尤雨溪在 Twitter 上说 Vite|Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗()
文章图片

尤雨溪 Twitter 原文地址
Vue 作者尤雨溪除了在 Twitter 上说,过也在其他地方讲过有关 Vite 的几点:
  • Vite 是新一代前端开发构建工具。Vue 官方 Vue 3.0 工具链全面默认推荐 Vite
  • vite 与 webpack 两者定位不同。webpack 是一个纯打包工具,vite 是更上层的工具链解决方案,类似(webpack + web 常用配置 + webpack-dev-server)
  • Vite 目前 npm 月下载量过百万,已经不再是小众工具,而是一颗冉冉升起的新星。
四、尤雨溪对 Vite 的总结 Vite|Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗()
文章图片

尤雨溪有关 Vite 总结 Twitter 原文
  1. 在开发过程中,Vite 是一个开发服务器,根据浏览器的要求编译源文件。无需捆绑,编译后真正做到按需使用。未修改的文件会返回304,所以浏览器根本就不会要求。这就是它启动快、保持快的原因。
  2. Vite 支持热模块替换,这和 "简单的重载页面 "有本质的区别,在DX方面是天壤之别。Vue组件和CSS HMR是开箱即用的支持,第三方框架可以利用HMR API。
  3. Vite支持一些webpack启发的功能,比如从js中导入'.css'文件(a la css-loader),基于fs的相对路径引用资产(a la file-loader m在构建过程中只需指定'-base'就能自动处理最终的公共部署路径)。
  4. Vite通过esbuild支持.(t|j)sx?文件,开箱即用,速度快得惊人,所以即使是TS转码,HMR也是字面上的即时性。
  5. Vite使用Rollup进行生产构建,内部配置与开发服务器功能一致。生产构建的输出是一个传统的静态资产目录,可以部署在任何地方(并且可以被polyfilled以支持旧的borwsers)。
  6. Vite的核心也是可扩展的(配置/插件格式待定)--你可以通过添加Koa中间件(用于开发)+Rollup aplugin(用于构建)来添加对自定义文件转换的支持。
五、无需配置 Vue 开发环境搭建后台管理工具 在使用 Vue 搭建后台管理工具时,开发者要处理一系列前端问题,从构建器的选择,到组件的开发,再到打包上线。每一步都费时费力,有没有一种开箱即用,无需管任何前端问题,让开发者专注在开发需求上的工具呢?推荐一下卡拉云,帮你快速搭建企业内部工具。
卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具,了解更多
Vite|Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗()
文章图片

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云。
扩展阅读:
  • Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
  • 最好的 6 个免费天气 API 接口对比测评
  • 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
  • 最棒的 7 个 Laravel admin 后台管理系统推荐
  • Retool 是什么,怎么样? —— Retool 低代码工具测评
  • 最好用的 5 个 Vue select 单选多选下拉组件
  • 最好用的 7 款 Vue admin 后台管理框架测评

    推荐阅读