本文完整版：《Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗》尤雨熙在发布Vite后写了一条推文，感觉自己不会再使用webpack（Vue-cli是基于Webpack开发的，配置了Webpack打包规则），Sean是Webpackcoredeveloper懂点中文的，直接在游达下感叹。Vue-cli一直是Vue2默认的官方脚手架工具，Vue-cli是基于Webpack开发的。在Vue3发布之后，友达同时发布了Vite，那么Vue3还有两个前端打包工具，Vite和VueCLI，那么他们应该如何选择呢？1.什么是Vite和VueCLI？VueCLI的特点Vue开发者应该知道VueCLI，它是Vue2最好的前端构建工具。VueCLI基于Webpack，是Webpack的超集。VueCLI基于Webpack构建，打包规则配置。内置热模块重载的开发服务器拥有丰富的官方插件集合。它依托于webpack庞大的社区资源，以友好的图形化方式创建和管理Vue项目界面。vuecli是在服务启动之前，将所有代码打包成一个Bundle，然后启动服务。这就是为什么在启动一些大型项目时特别慢的原因。在这方面，Vite做了很大的改进。Vite的特点Vite是由Vue团队开发的新一代前端开发构建工具。Vite并不是基于Webpack开发的。为了解决服务启动慢的问题，Vite将应用中的模块分为依赖和源代码两种。改进了开发服务器启动时间。依赖项：主要是在开发过程中不会更改的纯JavaScript。一些较大的依赖项（例如具有数百个模块的组件库）处理起来也很昂贵。依赖关系也经常以多种模块化格式存在。Vite将使用esbuild来预构建依赖项。esbuild是用Go编写的，比用JavaScript编写的捆绑器预构建依赖项快10-100倍。源代码：通常包含不直接是JavaScript的文件，需要转换，并且经常被编辑。同时，并不是所有的源代码都需要同时加载（比如基于路由拆分的代码模块）。综上所述，这就是Vite启动速度快的原因。2、Vite和VueCli的区别Vite基于原生ES6Modules，生产环境打包Rollup。vue-cli是基于webpack打包的，生产环境和开发环境都是基于webpack打包的。所以两者都是基于生产环境的源代码文件进行打包的。但是在开发环境中，两者是不同的。在开发环境上，Vite基于原生ES6，无需封装代码，浏览器直接调用即可。因此，Vite基于浏览器的原生功能，省去了打包的过程，在开发环境中体验起来极其愉悦。3、Vite会取代vue-cli吗？游禹锡在推特上说游禹锡的推特原地址Vue作者游禹锡除了在推特上说，还在其他地方谈到了Vite：Vite是新一代的前端开发构建工具。Vue官方的Vue3.0工具链默认全面推荐Vitevite和webpack。webpack是纯打包工具，vite是更高级的工具链方案，类似于（webpack+常用web配置+webpack-dev-server）vite目前在npm上月下载量过百万，不再是一个利基工具。是一颗冉冉升起的新星。4.尤玉玺对Vite的总结尤玉玺对Vite的总结推特原文在开发过程中，Vite是一个开发服务器，根据浏览器的要求编译源文件。无需捆绑，编译后即可按需使用。未修改的文件返回304，因此浏览器根本不会要求它。这就是它快速启动并保持快速的原因。Vite支持模块热替换，这与“简单的重载页面”有着本质的区别，在DX上是天壤之别。开箱即用地支持Vue组件和CSSHMR，第三方框架可以利用HMRAPI。Vite支持一些受webpack启发的功能，例如从js导入'.css'文件（一个css-loader），基于fs的相对路径引用资产（一个lafile-loaderm只需在构建期间指定'-base'将自动处理最终的公共部署路径）。Vite支持.(t|j)sx?通过esbuild文件，开箱即用，速度快得惊人，所以即使是TS转码，HMR也确实是即时的。Vite使用Rollup进行生产构建，其内部配置与开发服务器一致。生产构建的输出是一个传统的静态资产目录，可以部署在任何地方（并且可以填充以支持旧的浏览器）。Vite的核心也是可扩展的（配置/插件格式待定）——您可以通过添加Koa中间件（用于开发）+Rollup插件（用于构建）来添加对自定义文件转换的支持。5.无需配置Vue开发环境即可搭建后台管理工具。在使用Vue构建后台管理工具时，开发者要处理一系列的前端问题，从构建器的选择，到组件的开发，再到打包上线。每一步都耗时耗力。有没有一种工具可以开箱即用，没有任何前端问题，可以让开发者专注于开发需求？推荐卡拉云，助您快速打造企业内部工具。卡拉云可以帮助您快速构建企业内部工具。下图是用卡拉云搭建的内部广告监控系统。只需拖放组件，10分钟搞定。您还可以快速构建一套属于您的后台管理工具。详细了解KaraCloud是新一代低代码开发平台。与Vue、React等前端框架相比，KaraCloud的优势在于直接注册即可，无需先搭建开发环境。你准备好了。开发人员根本不需要处理任何前端问题。只需拖拽即可快速生成所需组件，一键访问常用数据库和API。根据指导，简单几步就可以打通前后端。数周的开发时间缩短为1小时。立即免费试用KaraCloud。进一步阅读：Video.jsTutorial-教你如何基于Vue构建一个HTML5视频播放器。最好的6个免费天气API接口。12款最佳Vue开源UI库评测对比评测——国内使用场景特别推荐。7Laraveladmin后台管理系统推荐Retool是什么，怎么样？——Retool低代码工具评测之最佳5Vueselect单选多选下拉组件之最佳7Vueadmin后台管理框架评测
