Vite 知识体系 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天，学习了掘金视频课《前端入门——工具篇》第十一节课程 “Vite 基本概要” ，第十二节课程 “Vite 上手实战与架构解析” ，第十三节课程 “ Vite 进阶路线” ，以下为本次的学习笔记：

Vite 基本概要

前端为何要使用构建工具？

随着前端发展，涉及到的资源是越来越多，如何高效快速的进行资源管理问题避无可避，正是由于传统的资源管理方式所带来的一系列弊端，推荐了构建工具的诞生。

前端工程的痛点

• 模块化：ESM、CommonJS、UMD
• 资源编译：高级语法的编译
• 产物质量：代码体积、代码性能
• 开发效率：热更新

前端构建工具的意义

• 模块化方案

  • 提供模块加载方案
  • 兼容不同模块规范

• 语法转译

  • 高级语法转译
  • 资源加载

• 产物质量

  • 产物压缩
  • 无用代码删除
  • 语法降级

• 开发效率

  • 热更新

Vite概要介绍

• 定位： 新一代前端构架工具

• 两大组成部分：

  • No-bundle开发服务
  • 源文件无需打包

• 生产环境基于Rollup的Bundler

• 核心特征：

  • 高性能，dev启动速度和热更新速度非常快
  • 简单医易用,开发者体验好
  • 传统构架工具遇到的问题
  • 缓慢的启动=>项目编译等待成本告
  • 缓慢的热更新=>修改代码后不能实时更新

• 瓶颈

  • bundle带来的性能开销
  • JS语言的性能瓶颈

Vite上手实战与架构解析

Vite项目初始化

• 项目初始化

npm i -g pnpm
pnpm create vite
pnpm install
npm run dev
复制代码

• 引入资源
• 使用HMR：无需额外配置，自动开启
• 生产环境Tree Shaking

Vite整体架构

关键技术：依赖预打包

进行预打包的原因

避免node_moudles过多的文件请求

将COmmonJs格式转换为ESM格式

实现原理：

服务器启动前扫描代码中用到的依赖

用Esbuild对依赖代码进行滚预打包

改写import语句，指定依赖为预构建产物路径

//改写前 import React from "react"; //改写后 import React from '/node_nodules/.vite/react.js' 关键技术：单文件编译 用Esbuild编译TS/JSX

优势： 编译速度提升10-100x

• 局限性

  • 不支持类型检查
  • 不支持语法降级为ES5

关键技术：代码压缩 Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

Vite进阶路线

• 深入双引擎

  • Esbuild
  • Rollup

• 插件机制

  • 抽离核心逻辑
  • 易于拓展

• 了解Vite社区生态

  • Vite社区插件