共计 2713 个字符，预计需要花费 7 分钟才能阅读完成。
2020 年太难了，终于等到除夕能放假劳动几天，闲着没事逛微博，而后，收到了来自 米国 的礼物：Vite2.0；
有没有很震惊！跨年礼物 vite2.0，我也真服啊，尤大你假期就不能打打游戏刷刷剧吗？
看到了更新，我还忍不住去官网文档一探到底，跟着看了几天，就在我差不多看完文档的时候，GitHub 那边传来了噩耗，三天工夫，提交了 10 个 beta，尤雨溪你几乎就是个恶魔啊；
来吧，大家也感受一下尤大的魔鬼更新速度……真是雷厉风行，日新月异
三天 10 更的 Vite 到底有什么魔力？
Vite（法语单词，“快”的意思）是一种新型的前端构建工具；
最后是配合 Vue3.0 一起应用的，起初适配了各种前端我的项目，目前提供了 Vue、React、Preact 框架模板；
就目前来说，Vue 应用的是 vue-cli 脚手架，React 个别应用 create-react-app 脚手架，尽管脚手架工具不一样，然而外部的打包工具都是 webpack ;
为什么要开发一个全新的构建工具，是 Webpack 不香了吗？
Vite 形式构建的我的项目，和应用 Webpack 构建的我的项目，有什么不同？
一个新工具的呈现，肯定是为了解决现有工具存在的问题的，否则新工具就没有存在的价值和意义；
Vite 到底解决了 Webpack 那个些问题？
想要搞清楚这个问题，咱们须要先搞清楚 webpack 是干什么的？很多人的第一印象必定是“打包工具”，那前端为什么须要打包工具呢？打包工具之前，前端开发有什么问题？咱们真的须要打包工具吗？
随着互联网的倒退，前端我的项目越来越简单，同时，V8 引擎，也让 JavaScript 这门玩具语言，插上了商业我的项目开发的翅膀，让 JS 不再受浏览器环境的解放，开始进军零碎级别开发畛域；而随着我的项目的复杂度降级，代码标准和治理就必须要同步晋升，于是，编程社区中提出了多种模块化标准，服务端抉择了 CommonJS 标准，客户端抉择 AMD 标准较多，然而，两种模块化标准也都存在肯定的问题，都是 JS 编程，有两个不同的模块化标准，在 JS 语言层面还是不够的；
终于在 ES6 中，ECMA 委员会推出了语言层面模块零碎：ES Modules 标准 ；
在目前的编程实际中，前端编程得益于构建工具的倒退，编码过程中应用 ES Modules 标准进行编码是十分宽泛的，然而后端仍然应用 CommonJS 标准较多，不过 NodeJS 方面曾经做出扭转，逐步趋向于 ES Modules 标准；
咱们来一点代码，简略看一下 ES Modules 的语法个性
模块化能够帮忙咱们更好地解决简单利用开发过程中的代码组织问题，然而随着模块化思维的引入，咱们的前端利用又会产生了一些新的问题，比方：
首先，咱们所应用的 ES Modules 模块零碎自身就存在环境兼容问题。只管现如今支流浏览器的最新版本都反对这一个性，然而目前还无奈保障用户的浏览器应用状况。所以咱们还须要解决兼容问题。
其次，模块化的形式划分进去的模块文件过多，而前端利用又运行在浏览器中，每一个文件都须要独自从服务器申请回来。零散的模块文件必然会导致浏览器的频繁发送网络申请，影响利用的工作效率。
最初，谈一下在实现 JS 模块化的根底上的发散。随着利用日益简单，在前端利用开发过程中不仅仅只有 JavaScript 代码须要模块化，HTML 和 CSS 这些资源文件也会面临须要被模块化的问题。而且从宏观角度来看，这些文件也都应该看作前端利用中的一个模块，只不过这些模块的品种和用处跟 JavaScript 不同。
对于开发过程而言，模块化必定是必要的，所以咱们须要在后面所说的模块化实现的根底之上引入更好的计划或者工具，去解决下面提出的 3 个问题，让咱们的利用在开发阶段持续享受模块化带来的劣势，又不用放心模块化对生产环境所产生的影响。
置信你曾经想到了，这就是 webpack 等一系列打包工具呈现的起因，下面的问题，就是这类工具外围要解决的问题；
实质上，webpack 是一个古代 JavaScript 应用程序的动态模块打包器(module bundler)。
Vue 脚手架工具 vue-cli 应用 webpack 进行打包，开发时能够启动本地开发服务器，实时预览，因为须要对整个我的项目文件进行打包，开发服务器启动迟缓
而对于开发时文件批改后的热更新 HMR 也存在同样的问题；
Webpack 的热更新会以以后批改的文件为入口从新 build 打包，所有波及到的依赖也都会被从新加载一次
Vite 则很好地解决了下面的两个问题。
先来 打包问题，vite 只启动一台动态页面的服务器，对文件代码不打包，服务器会依据客户端的申请，加载不同的模块解决，实现真正的按需加载；
对于 热更新问题 ，vite 采纳立刻编译以后批改的文件，同时 vite 还会应用缓存机制(http 缓存 => vite 内置缓存)，加载更新后的文件内容
所以，vite 具备了 疾速冷启动、按需编译、模块热更新 等低劣特质；
综上所述，vite 构建我的项目与 vue-cli 构建的我的项目次要在于开发模式下，区别还是比拟大的：
1：Vite 在开发模式下不须要打包能够间接运行，应用的是 ES6 的模块化加载规定；Vue-CLI 开发模式下必须对我的项目打包才能够运行；
2：Vite 基于缓存的热更新，Vue-CLI 基于 Webpack 的热更新
说了这么多，vite 到底应该怎么用呢？
尽管目前还没有正式公布，然而文档曾经写得差不多了 https://vitejs.dev/guide/；
咱们简略来应用一下
确保 Node 版本是大于等于 12 的；
应用 NPM 命令：
$ npm init @vitejs/app或者应用 Yarn 命令：
$ yarn create @vitejs/app命令执行后，会让咱们抉择构建哪一种框架的我的项目，我这里就间接抉择 vue 了
如果你不想在命令行中做抉择，能够指定具体的模板
$ npm init @vitejs/app my-vue-app --template vue
留神，不论哪种构建形式，只是下载了我的项目代码模板，运行我的项目所须要的第三方扩大，都须要再次装置才可能运行；
进入到我的项目目录，装置所需依赖，并启动我的项目：
cd <my-project>
npm install (or `yarn`)
npm run dev (or `yarn dev`)通过 package.json 文件，咱们能看到启动和打包的命令
通过 npm run dev 命令，启动开发服务器：
查看运行后果：
应用 npm run build 命令进行我的项目构建：
须要留神的是，构建胜利后的代码是动态资源文件，在本地仍然须要提供一台动态服务器能力运行；
体验就到这里了，想要感触尤大的魔鬼更新速度的，能够去 github 看看：https://github.com/vitejs/vite
