Vite知识体系简述

​​​​​​​

目录

​编辑​​​​​​​

1、浅谈构建构建工具

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

构建工具这里从四个方面进行描述：

2、Vite概要介绍

2.1、Vite是什么？Why Vite?

3、Vite上手实战

3.1、Vite项目初始化

3.2、使用Sass/Scss & Css Modules

3.3、使用静态资源

3.4、使用HMR

3.5、生产环境 Tree Shaking

4、Vite整体架构

关键技术：依赖预打包

关键技术：单文件编译

关键技术：代码压缩

关键技术：插件机制

5、Vite进阶路线

深入双引擎

Vite插件开发

代码分割（拆包）

JS编译工具（Bable）

语法安全降级

服务器渲染

深入了解底层标准

---

1、浅谈构建构建工具

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

前端通点：资源

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

构建工具这里从四个方面进行描述：

1. 模块化：ESM、CommonJs、UMD

   模块化方案

   1. 提供模块加载方案

   2. 兼容不同模块规范

2. 资源编译： 高级语法的编译

   语法转译

   • 高级语法转译：如Sass、TypeScript

   • 资源加载：如图片、字体、worker

3. 产物质量： 代码体积、代码性能

   方案

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

4. 开发效率： 热更新

2、Vite概要介绍

2.1、Vite是什么？Why Vite?

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

两大组成部分：

1. No-bundle开发服务，源文件无需打包

2. 生产环境基于Rollup的Bundler

核心特征：

1. 高性能，dev启动速度和热更新速度非常快

2. 简单医易用,开发者体验好

传统构架工具遇到的问题

1. 缓慢的启动=>项目编译等待成本告

2. 缓慢的热更新=>修改代码后不能实时更新

瓶颈

1. bundle带来的性能开销

2. JS语言的性能瓶颈

3、Vite上手实战

3.1、Vite项目初始化

• 提前安装 pnpm (需管理员权限)

  npm i -g pnpm

• 初始化命令

  pnpm create vite

• 安装依赖

  pnpm install

• 项目启动

  npm run dev

3.2、使用Sass/Scss & Css Modules

• 安装Sass

  pnpm i sass -D

• 目录结构

• index.module.scss

  .header {
    color: red;
  }

• index.tsx

  import  React from 'react';
  import styles from './index.module.scss';
  export function Header(){
    return <div className={styles.header}>Header</div>
  }

• 效果：页面Header文字表现为红色

3.3、使用静态资源

• 用法：比如图片直接引入在需要的地方加上就即可

3.4、使用HMR

无需额外配置自动开启

3.5、生产环境 Tree Shaking

Tree Shaking 在Vite中 无需配置，自动开启

优化原理

1. 基于ESN的import/export 语句依赖关系，与运行时状态无关

2. 在构架阶段将为使用道德代码进行删除

理解：在打包时项目中引用单位使用的部分不会进行打包处理

• 打包

  pnpm run build

4、Vite整体架构

关键技术：依赖预打包

为什们要进行预打包？

1. 避免node_moudles过多的文件请求

2. 将COmmonJs格式转换为ESM格式

实现原理：

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

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

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

   //改写前
   import React from "react";
   //改写后
   import React from '/node_nodules/.vite/react.js'

关键技术：单文件编译

用Esbuild编译TS/JSX

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

局限性

• 不支持类型检查

• 不支持语法降级为ES5

关键技术：代码压缩

**Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具**

关键技术：插件机制

开发阶段：使用Rollup插件机制

生产环境： 直接使用Rollup

• 插件兼容性查阅传送

5、Vite进阶路线

深入双引擎

• Esbuild

• Rollup

学习顺序

• 先了解基本使用，动手尝试各项常用配置

• 然后学习其插件开发

为什么需要插件机制？

• 抽离核心逻辑

• 易于拓展

Vite插件开发

1. 服务启动阶段

   1. config

   2. configResolved

   3. options

   4. configureServer

   5. buildStart

2. 请求相应阶段

   • transformIndexHtml

   • resolveId => load => transform

3. 热更新阶段： handleHotUpdate

4. 服务关闭阶段

   1. buildEnd

   2. closeBundle

参考资料

• Vite插件开发文档

• 复杂度较低的插件：json加载插件

• 复杂度中等的插件：Esbuild接入插件

• 复杂度较高的插件：官方React插件

代码分割（拆包）

参考资料

• 官方中文文档

• rollup.js

JS编译工具（Bable）

出现原因：

• JS语法标繁多，浏览器支持程度不一

• 开发者需要用到高级语法

参考资料：

• babe官方站点

• bable插件手册

语法安全降级

如何避免

• 上层解决方案：@vite.js/plugin-legacy

• 底层解决

  • 借助Bable进行语法自动降级

  • 提前注入Polyfill实现，如core-js,regenerator-runtime

参考资料

• @bable/preset-env文档

• Vite官方降级插件文档

服务器渲染

一种常见的渲染模式，用于提升首屏性能和SEO优化

参考资料

• Vite-SSR

深入了解底层标准

• CJS规范

• ESM规范

• HTTP2.0特性

参考资料

• ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog

• Publish ESM and CJS in a single package

• 什么是PureESM