vite简介
Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。
Vite有如下特点：
快速的冷启动: No Bundle + esbuild 预构建
即时的模块热更新: 基于ESM的HMR，同时利用浏览器缓存策略提升速度
真正的按需加载: 利用浏览器ESM支持，实现真正的按需加载
vite 的使用方式
快速通道
同常见的开发工具一样，vite 提供了用 npm 或者 yarn 一建生成项目结构的方式，使用 yarn 在终端执行
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
即可初始化一个 vite 项目（默认应用模板为 vue3.x），生成的项目结构十分简洁
|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json
执行 yarn dev 即可启动应用
Vite 解决了 Webpack 哪些问题
随着项目的复杂度升级，代码规范和管理就必须要同步提升。于是，编程社区中提出了多种模块化规范，服务端选择了 CommonJS 规范，客户端选择 AMD 规范较多，但是，两种模块化规范也都存在一定的问题，都是 JS 编程，有两个不同的模块化规范，在 JS 语言层面还是不够的，终于在 ES6 中，ECMA 委员会推出了语言层面模块系统：ES Modules 规范
模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题，但是随着模块化思想的引入，我们的前端应用又会产生了一些新的问题，比如：
- 首先，我们所使用的 ES Modules 模块系统本身就存在环境兼容问题。尽管现如今主流浏览器的最新版本都支持这一特性，但是目前还无法保证用户的浏览器使用情况。所以我们还需要解决兼容问题
- 其次，模块化的方式划分出来的模块文件过多，而前端应用又运行在浏览器中，每一个文件都需要单独从服务器请求回来。零散的模块文件必然会导致浏览器的频繁发送网络请求，影响应用的工作效率
- 最后，谈一下在实现 JS 模块化的基础上的发散。随着应用日益复杂，在前端应用开发过程中不仅仅只有 JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题。而且从宏观角度来看，这些文件也都应该看作前端应用中的一个模块，只不过这些模块的种类和用途跟 JavaScript 不同
对于开发过程而言，模块化肯定是必要的，所以我们需要在前面所说的模块化实现的基础之上引入更好的方案或者工具，去解决上面提出的 3 个问题，让我们的应用在开发阶段继续享受模块化带来的优势，又不必担心模块化对生产环境所产生的影响
如何学好vite
尽力去找机会进行实习、外包等进行实际项目的锻炼，哪怕没有工资也要去积极尝试。这一条并不是多做就会好有的效果，有的人做的项目不少总是按着老的思路去做，做了很多，水平也不会有太大的提高，提高的也只能是熟练度．每一次在做的过程中要学会去思考，看看我们有没有更优化的的方法去实现同一个效果。
