Day_05 : 让 Vite 来开启你的Vue 之 前进Vite

Hi Dai Gei Ho~ 我是Winnie，终於今天来到了第五天，明天也要放假了！

在接下来几篇文章也将开始进入 Vite 的主题，其中此篇文章主要会针对 Vite家庭背景 来做介绍。

Vite

Vite 主要是由 Vue之父 尤雨溪 所创建的 新型前端建构工具，其中取名为 Vite的主要原因 是因为 在法语的单字中有『快速』的意思，就如同他的开发速度一样快 （注意是念Vite不是Vite喔XD） 。

而在现今 的 前端建开发工具中，许多主流框架也都发展出属於自己的专案建构工具，例如：Vue 的vue-cli，React 的 create-react-app 等，其中大多都是采用 Webpack 来进行打包 的。

到这边你可能会想 既然 Webpack这麽好用？ 为何 尤雨溪大大 要再 创建一个Vite 来 打自己的 Vue-cli啊？

事情是这样的～在昨天的文章中 我们有提到 webpack是 采用 Module bundler 的方式进行打包，但好像忘记提到在Webpack中还有一个特点，就是他们有自己的dev-server(本地服务器），而dev-server(本地服务器）主要目的是在开发时可以自动检测程序码的变更来更新画面，(如上图)其运作过程也是先从 进入点(entry point)分析引入的模组所产生依赖图 进行打包，结束後才会启动Server，一旦程序码修改，Webpack 的热更新(HMR)会再次以修改的 进入点(entry point)** 进行打包，同时所有相关的依赖也都会重新被加载一次。於是这样就会产生两个缺点，当专案越来越大时，开发的时间难免就会变长，同时也就会造成开发体验变慢。

就像 你知道当等待时间一变长，不知道为何你就会想躺下来。(如上图)

而 Vite的出现 刚好就解决了上述开发速度的问题。

Vite dev-server原理：

与Webpack的不同，Vite也有自己的dev-server，同时利用 浏览器支援 的 Native ESM 进行运作。

 //main.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="w-full" id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

 //main.js

  import { createApp } from 'vue'
  import App from './App.vue'

  createApp(App).mount('#app')

就如同以上程序码与图，其运作方式是，Vite也会在 本地 启动一个dev-server(本地服务器)，当浏览器在Html档中读取到<script type="module" src="/src/main.js">後，会针对路main.js中有 import 的 App.vue的模组 向服务器发送请求，同时Vite利用内部的黑魔法 会开始将 浏览器看不懂的程序码(如Vue)进行转译压缩成一支Js档。

而这样的运作模式的好处在於 即使没有对专案进行传统打包，Vite也可以透过 浏览器 对Native ESM的支援，根据 Http的request 来载入模组进行处理，实现真正的依需求加载。让开发速度变得更快，人生也会变得美好。

附上 浏览器版本 对 Native ESM 的 支援度图，从上图我们可以看到现在大多浏览器都支援了Native ESM，除了...（这图真好用）

另外Vite对於 热更新(HMR)运作方式是透过 webSocket/Chokidar/esbuild(後期文章会再拉出来解释)即时编译修改的程序码，并透过暂存机制加载来更新後的内容。

最後总结以上为何Vite可以这麽快的原因在於，他实践了快速冷启动 依照需求编译 模组热更新的三大特点，来改善了过去传统打包的问题。

速度实际测试

好了以上解释了这麽多，我们都还没看过Vite到底多麽快速，以下动图是之前在 Twitter上引发了热烈讨论，而其内容主要是在比较 Vite创建 React专案 与 React 的 create-react-app 建立专案时的速度差异。在下方动图我们可以看到 右边的Vite 只要输入几个指令码 就将专案建好了，而左边还在进行建立。(看到这，是不是觉得有点神奇！我也觉得神奇，而且从六月用到现在 已经回不去了XD)

尝试来 开启你 的 Vite 吧

最後，那Vite要怎麽安装？开点小玩笑～

第一步起手式，输入指令 npm 与yarn择一输入

//npm 

$ npm init vite@latest

//yarn 

$ yarn create vite

再来请输入 专案名称 及 选择你想使用的框架。


顺带一提这边也是我对尤雨溪大大 感到非常敬佩的地方，因为Vite不仅只是支援 Vue、原生JS，甚至是React也都支援。(有一种 虽然我们是竞争工具，但我还是接纳你的感觉XD)

接着等待不用1.5秒时间，专案建立完成，依照下列步骤开启专案 即完成

cd 你的专案名称
yarn                //初始化你的专案
yarn dev            //开启 dev server

以上是今天的文章，不晓得大家有没有体会到Vite的快速了，如果觉得有 恭喜你与美好人生又近一步了XD，谢谢大家的阅读，如有错误地方欢迎各位的指教。


<<:  初次遇见 .NET

>>:  Chapter2 - 用物件看真实世界（I）写程序为什麽需要物件？如何简化画落叶的流程？

课堂笔记 - 深度学习 Deep Learning (3)

简单了解前导知识後就是正式进入机器学习的几种模式>> Types Of Learning...

找个指导教授怎麽这麽难 QQ

本篇来分享我录取研究所以後寻找指导教授的故事! 进入正题 如果是正在念/已经毕业的硕士生都会知道找教...

EP23 - 持续部署使用 Octopus Deploy 三部曲，新增 Octopus 专案及调整 Jenkins 环境

前几天我们为 Octopus Server 建置基础设施， 今天我们则是设定专案内容， 并在 Jen...

Android Studio初学笔记-Day4-ConstaintLayout

今天要再来介绍一个我个人也蛮常使用的一布局 ConstaintLayout (约束布局) 承前两篇这...

Day3 条件判断

今天来学学Vue里面的判别式v-if 跟v-show 1.v - if 在这里我们将条件设定为Sho...