【Web技术】870- 10分钟了解 Vite

水深无声 2022-10-29 15:23 226阅读 0赞

![format_png][]

> Vite 是 vue的作者尤雨溪开发的打包工具，目前亮点是本地开发时热加载编译极快，在大型项目中体验较好。

贴一下作者微博原话：

> Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

从上面可以看出：

*  Vite 主要对应的场景是开发模式，跳过打包按需加载，因此热更新的速度非常快；
 *  在大型项目上可以有效提高本地开发编译打包的速度，解决 “改一行代码等半天” 问题；
 *  浏览器解析 imports，利用了 type="module" 功能，然后拦截浏览器发出的 ES imports 请求并做相应处理；
 *  生产模式是用 rollup 打包，这里后续应该会做优化；

### 一、现代浏览器的模块功能 ###

将`script`标签的type属性设置为`module`，那么在js中就可以使用模块功能`(import '**.js')`，es6兼容性为IE11及以下不支持，从 Vue3 的 proxy 和 Vite 的模块，可以看出尤大是彻底放弃 IE 了。

#### 二、拦截http请求 ####

针对不同类型的文件做不同的处理

1.  js文件 用 es-module-lexer 来对 js 进行的语法分析获取 imports 数组（依赖分析），然后将import语法替换为请求对应的js文件。

原代码：

<div id="app"></div>
    <script type="module">
    import { createApp } from 'vue'
    import App from './App.vue'
    
    createApp(App).mount('#app')
    </script>

转换后：

<div id="app"></div>
    <script type="module">
    import { createApp } from '/@modules/vue'
    import App from './App.vue'
    
    createApp(App).mount('#app')
    </script>

### 2. vue文件 ###

vue单文件组件包含的三个部分 template、script、style, Vite 会将单文件组件分成三个部分分别请求，以及做相应处理。

### 2.1 template ###

Vite 将 template 编译成 render 函数后返回。

### 2.2 script ###

分析 js 中的 import 依赖，重新发起请求。

### 2.3 style ###

将 style 编译成 css 插入head中。原本的 App.vue 文件是：

<template>
      <h1>Hello Vite + Vue 3!</h1>
      <p>Edit ./App.vue to test hot module replacement (HMR).</p>
      <p>
        <span>Count is: {
        { count }}</span>
        <button @click="count++">increment</button>
      </p>
    </template>
    
    <script>
    export default {
      data: () => ({ count: 0 }),
    }
    </script>
    
    <style scoped>
    h1 {
      color: #4fc08d;
    }
    
    h1, p {
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>

转换后变成了：

// localhost:3000/App.vue
    import { updateStyle } from "/@hmr"
    
    // 抽出 script 逻辑
    const __script = {
      data: () => ({ count: 0 }),
    }
    // 将 style 拆分成 /App.vue?type=style 请求，由浏览器继续发起请求获取样式
    updateStyle("c44b8200-0", "/App.vue?type=style&index=0&t=1588490870523")
    __script.__scopeId = "data-v-c44b8200" // 样式的 scopeId
    
    // 将 template 拆分成 /App.vue?type=template 请求，由浏览器继续发起请求获取 render function
    import { render as __render } from "/App.vue?type=template&t=1588490870523&t=1588490870523"
    __script.render = __render // render 方法挂载，用于 createApp 时渲染
    __script.__hmrId = "/App.vue" // 记录 HMR 的 id，用于热更新
    __script.__file = "/XXX/web/vite-test/App.vue" // 记录文件的原始的路径，后续热更新能用到
    export default __script

### 三、热更新 ###

Vite 的是通过 WebSocket 来实现热更新通信，当代码改动以后，通过 websocket 仅向浏览器推送改动的文件。因此 Vite 本地热更新的速度不会受项目的大小影响太多，在大型项目中本地开发速度快。Vite 的客户端热更新代码是在 app.vue 文件编译过程中，将代码注入进去的。

### 四、Vite 和 vue-cli 的优缺点对比 ###

![format_png 1][]

![format_png 2][]

五、小结 目前 Vite 正在以很快的速度迭代着，优化自身的功能，未来可期

>原文:https://juejin.cn/post/6928175048163491848

![format_png 3][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![format_png 4][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[format_png]: /images/20221024/fb334a533a8a4ca2b496a72c2488958f.png
[format_png 1]: /images/20221024/440d603463ce428096031ee4aaaf99d0.png
[format_png 2]: /images/20221024/2d3c5da5dc8d425596326bed1dd4e9b2.png
[format_png 3]: /images/20221024/119911136e6045b18ee18671d2c4046a.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[format_png 4]: /images/20221024/c5ad56f42f9c4adca7fa6009a9883990.png