走近vite | 青训营

用户1791462849543
93 阅读6分钟

课程重点

  1. 前端工程的痛点
  2. 前端构建工具的意义
  3. Vite 概览
  4. Vite 业界案例
  5. Vite 优势

课程重点

  1. 项目初始化
  2. 使用 Sass/Scss & CSS Modules
  3. 使用静态资源
  4. 生产环境 Tree Shaking

课程重点

  1. 深入双引擎
  2. Vite 插件开发
  3. 代码分割(拆包)
  4. JS 编译工具(Babel)
  5. 语法安全降级
  6. 服务端渲染(SSR)
  7. 深入了解底层标准
  8. Vite 社区生态

前端工程构建工具是用于自动化构建和打包前端项目的工具，它可以帮助开发者提高开发效率、优化代码质量和性能，并提供一些便捷的开发辅助功能。

Vite（发音为 /vit/）是一个由尤雨溪（Evan You）开发的前端构建工具。

Vite 是一个现代化的前端构建工具。它的目标是提供一种快速、简单的开发体验，特别适用于小型项目或原型开发。

Vite 的主要特点是基于 ES 模块的开发服务器。它利用浏览器原生支持的 ES 模块系统，将源代码在浏览器中真正地编译和执行，而不是像传统的前端构建工具那样将代码合并成一个或多个打包后的文件。这种开发方式带来了更快的冷启动时间和热更新效果，使得开发者可以即时看到修改后的结果，提高开发效率。

除了快速的开发服务器，Vite 还具有以下功能和优势：

  1. 零配置：Vite 可以在大多数项目中零配置启动，减少了繁琐的配置过程。
  2. 快速的热模块替换（HMR）：Vite 使用了改进的 HMR 技术，能够在修改代码时快速更新模块，而无需刷新整个页面。
  3. 内置插件支持：Vite 内置支持常用的插件，例如 TypeScript、Less/Sass 等，可以方便地扩展项目功能。
  4. 自动代码分割：Vite 在生产构建时会自动地将代码分割为较小的文件，以实现更好的加载性能。

在开发过程中，Vite 可以与现代化的前端框架（如 Vue、React、Angular）配合使用，提供更好的开发体验。它适用于快速开发原型、实验性项目或小型项目，能够显著提高开发效率和调试体验。

学习 Vite 可以按照以下路线进行：

  1. 官方文档：Vite 官方提供了详细的文档，包括快速上手指南、配置说明、插件开发等。可以从官方文档开始学习，并参考其中的示例和代码片段。
  2. 实践项目：选择一个具体的项目或者小练习，使用 Vite 进行构建和开发，并尝试运用其特性和功能。实践是学习的最佳方式，通过实际操作可以更好地理解和掌握 Vite。
  3. 社区资源：Vite 生态庞大且活跃，有很多优秀的社区资源可供学习和参考。可以加入 Vite 的官方社区论坛、GitHub 上的开源项目，或者参与相关的社交媒体讨论，与其他开发者交流经验和技巧。

在学习 Vite 过程中，了解其生态系统也非常重要。Vite 生态丰富，下面是其中几个重要的组成部分：

  1. Vite 插件：Vite 提供了一套插件系统，可以扩展其功能。通过搜索 Vite 插件库，可以找到各种插件，用于增强开发体验、处理特定类型文件、优化构建等。
  2. Vue、React、Angular 等框架生态：Vite 与主流前端框架（如 Vue、React、Angular）兼容，并且有专门为这些框架设计的插件和工具集成。如果你已经熟悉这些框架，学习 Vite 将会更加轻松，并能够充分利用框架和 Vite 的协同效应。
  3. Vite 社区和周边工具：Vite 社区活跃度高，有很多社区成员开发了一些周边工具和辅助库，用于增强 Vite 的功能或提供针对特定场景的解决方案。可以关注社区的最新动态，了解这些工具的应用和使用方法。

通过深入学习 Vite 的官方文档、实践项目、参与社区和了解生态系统，将能够全面掌握 Vite 构建工具的使用和应用，并在前端开发中获得更好的效率和体验。

以下是一些Vite的命令行操作和编码操作的示例：

  1. 安装Vite（全局安装）：
npm install -g create-vite
  1. 创建一个新的Vite项目：
create-vite my-project
cd my-project
  1. 安装项目依赖：
npm install
  1. 启动开发服务器：
npm run dev
  1. 构建生产版本：
npm run build
  1. 创建一个Vue单文件组件：
<template>
  <div>
    <h1>Hello, Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
h1 {
  color: red;
}
</style>

除了上述基本的命令行操作和编码操作外，Vite还提供了许多内置功能，如自动化的代码拆分、按需引入、CSS预处理器支持、TypeScript支持、插件系统等。可以查阅Vite的官方文档来了解更多关于Vite的功能和用法。

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

正因如此，产生了很多优秀的打包工具，比如webpack、Rollup、Parcel。但是，久而久之开发构建的应用越来越大，就不得不面临一个问题——使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器。周而复始会极大的降低开发效率，以及开发的“幸福感”。 这时候Vite就孕育而生了，Vite之所以能短时间内成为业界的“宠儿”，旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

服务器启动缓慢以及更新缓慢

服务器启动缓慢

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。 Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

初始化流程

1.调用resolveConfig函数，解析合并各种配置。

2.初始化一个http+connect服务器。

3.创建插件容器 ，createPluginContainer方法，把插件的各个钩子函数串联起来，后续在请求处理的过程中直接执行挂载好的钩子函数。

4.生成一个server对象，包含配置信息、服务器信息、一些辅助函数等。

5.配置一系列内置中间件，各个中间件做的事情，返回 server 对象。

调用 server 的 listen 方法

1.运行插件container的buildStart钩子，进而运行所有插件的buildStart钩子

2.进行依赖预构建，运行runOptimize函数。

3.开启服务，监听端口。

avatar
文章
阅读
粉丝