前端打包工具 Vite 和 Vue-CLI


Vue-cli 是 Vue2 默认官方脚手架工具，基于 Webpack 开发。
Vue3 发布后，同时发布了 Vite 

Vue-cli的特点：
Vue2 的前端构建工具，基于 Webpack 
内置热模块重载的开发服务器
丰富的官方插件
友好的图形化创建和管理 Vue 项目界面

Vue-cli 在服务启动之前，要把所有代码打包成 Bundle 再启动服务。
这就是为什么启动一些大型项目时，特别慢的原因。这一点上 Vite 做了大幅改善。



Vite 是 Vue 团队开发的新一代前端开发与构建工具，解决服务启动慢的问题，
Vite 将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

依赖：
大多为在开发时不会变动的纯 JavaScript。
一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。
依赖也通常会存在多种模块化格式。Vite 会使用 esbuild 预构建依赖。
esbuild 使用 Go 编写，比以 JavaScript 编写的打包器预构建依赖快 10-100 倍


源码
通常包含一些并非直接是 JavaScript 的文件，需要转换，时常会被编辑。
同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。




Vite 基于原生 ES6 Modules，生产环境打包使用 Rollup
vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。
所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。
Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。
Vite 因为基于浏览器的原生功能，省掉了打包过程，开发环境体验好