Vite与Vue Cli的区别与详解

它们的功能非常相似，都是提供基本项目脚手架和开发服务器的构建工具。

主要区别

Vite在开发环境下基于浏览器原生ES6 Modules提供功能支持，在生产环境下基于Rollup打包；
Vue Cli不区分环境，都是基于Webpack。

在生产环境下，两者都是基于源码文件的，Rollup和Webpack都是对代码进行处理，并提供浏览器页面所需要的HTML、JavaScript、CSS、图片等静态文件。

开发环境的不同：
Vue Cli在开发环境下也是基于对源码文件的转换，即利用Webpack对代码打包，结合webpack-dev-server提供静态资源服务。
Vite在开发环境下基于浏览器原生ES6 Modules，省掉了耗时的打包流程，无须对代码进行打包，直接让浏览器使用，才使得开发环境下的体验非常好。

Webpack与Rollup工具的优劣：

• Webpack生态丰富，可以处理各种各样的资源依赖，以及代码拆分与合并。Rollup的插件生态较Webpack弱一些，但是也可以满足基本的日常开发需要，且不支持Code Splitting和热更新。

• Rollup对ES6
  Modules的代码依赖方式天然支持，而对于类似CommonJS或UMD方式的依赖却无法可靠地处理；Webpack借助自己的__webpack_require_函数和Babel，对于各种类型的代码都支持得比较好。

• Rollup会静态分析代码中的import，并将排除任何未实际使用的代码，即对Tree Shaking支持得很好；Webpack则从Webpack2版本开始支持Tree Shaking，且要求使用原生的import和export语法，并且是没有被Babel转换过的代码。

• Rollup编译的代码可读性更好，没有过多的冗余代码；而Webpack则会插入很多__webpack_require__函数，影响代码的可读性。

哪个性能更好

通过主要区别的介绍，在开发环境下，Vite速度更快，体验性更好。生产环境下区别不大。
Vite不捆绑应用服务器端。 依赖于浏览器对ES6 Modules的原生支持，浏览器直接通过HTTP请求JavaScript模块，并且在运行时处理，而对于Sass、Vue文件等，则单独采用插件处理，并提供静态服务，利用浏览器高效处理，消耗更少的时间。
Vue Cli的Webpack的工作模式： 通过解析应用程序中的每一个JavaScript模块中的import或者require，借助各种loader将整个应用程序构建成一个基于JavaScript捆绑包，并针对不同的文件后缀名（Sass、Vue等）转换成对应的JavaScript文件。这都是在webpack-dev-server服务器端提前完成的，文件越多，依赖越复杂，则消耗的时间越多。

Vite与Vue Cli的优缺点对比：

Vue Cli和Vite到底怎么选择？需要结合实际的业务场景来做选择。