Vite 知识体系学习(1) | 青训营笔记

看天的小猪
203 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第20天。

笔记小结： 本节课杨兴元老师详细讲了Vite的构建工具，依次进行了Vite概要介绍，上手实战以及Vite整体架构，Vite进阶路线。现对照课程内容顺序将笔记补充如下。

01.为什么需要构建工具？

image.png 前端痛点：资源

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

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

  • 模块化：ESM、CommonJs、UMD
    • 模块化方案
      • 提供模块加载方案
      • 兼容不同模块规范
  • 资源编译： 高级语法的编译
    • 语法转译
      • 高级语法转译：如Sass、TypeScript
      • 资源加载：如图片、字体、worker
  • 产物质量： 代码体积、代码性能
    • 方案
      • 产物压缩、无用代码删除、语法降级
  • 开发效率： 热更新

02. Vite概要介绍

什么是Vite

Vite是一种新型的前端构建工具，它能显著改善前端开发体验。

Vite由两个主要部分组成：

  1. dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
  2. 生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程

Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

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

  • 两大组成部分：
    • No-bundle开发服务，源文件无需打包
    • 生产环境基于Rollup的Bundler
  • 核心特征：
    • 高性能，dev启动速度和热更新速度非常快
    • 简单医易用,开发者体验好
  • 传统构架工具遇到的问题
    • 缓慢的启动=>项目编译等待成本告
    • 缓慢的热更新=>修改代码后不能实时更新
  • 瓶颈
    • bundle带来的性能开销
    • JS语言的性能瓶颈

前端构建工具的意义

image.png

03. Vite上手实战

image.png

  • 提前安装 pnpm (需管理员权限)
npm i -g pnpm
  • 初始化命令
pnpm create vite
  • 安装依赖
pnpm install
  • 项目启动
npm run dev

使用Sass/Scss & Css Modules

image.png

image.png

  • 安装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文字表现为红色

使用静态资源

image.png

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

使用HMR

无需额外配置自动开启

生产环境 Tree Shaking

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

  • 优化原理

    • 基于ESN的import/export 语句依赖关系，与运行时状态无关
    • 在构架阶段将为使用道德代码进行删除

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

  • 打包

pnpm run build

04. Vite整体架构

image.png

关键技术：依赖预打包

为什们要进行预打包？

  • 避免node_moudles过多的文件请求
  • 将COmmonJs格式转换为ESM格式

image.png 实现原理：

  • 服务器启动前扫描代码中用到的依赖
  • 用Esbuild对依赖代码进行滚预打包
  • 改写import语句，指定依赖为预构建产物路径
 //改写前
import React from "react";
//改写后
import React from '/node_nodules/.vite/react.js'

关键技术：单文件编译

用Esbuild编译TS/JSX

image.png 优势： 编译速度提升10-100x
局限性

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

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

QQ截图20220814194012.jpg

关键技术：插件机制

image.png

  • 开发阶段：使用Rollup插件机制
  • 生产环境： 直接使用Rollup
    • 插件兼容性查阅传送

image.png

05. Vite进阶路线

深入双引擎

  • Esbuild
  • Rollup

学习顺序

  • 先了解基本使用，动手尝试各项常用配置
  • 然后学习其插件开发

为什么需要插件机制？

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

Vite插件开发

2222222222(已去底).jpg

  • 服务启动阶段
    • config
    • configResolved
    • options
    • configureServer
    • buildStart
  • 请求相应阶段
    • transformIndexHtml
    • resolveId => load => transform
  • 热更新阶段： handleHotUpdate
  • 服务关闭阶段
    • buildEnd
    • closeBundle

参考资料

  • Vite插件开发文档
  • 复杂度较低的插件：json加载插件
  • 复杂度中等的插件：Esbuild接入插件
  • 复杂度较高的插件：官方React插件

代码分割（拆包）

参考资料

  • 官方中文文档

  • rollup.js

JS编译工具（Bable）

出现原因：

  • JS语法标繁多，浏览器支持程度不一
  • 开发者需要用到高级语法

参考资料：

  • babe官方站点
  • bable插件手册

语法安全降级

image.png 如何避免

  • 上层解决方案：@vite.js/plugin-legacy
  • 底层解决
  • 借助Bable进行语法自动降级
  • 提前注入Polyfill实现，如core-js,regenerator-runtime

参考资料

  • @bable/preset-env文档
  • Vite官方降级插件文档

服务器渲染

33333(已去底).jpg 一种常见的渲染模式，用于提升首屏性能和SEO优化

参考资料

  • Vite-SSR

深入了解底层标准

image.png

  • CJS规范
  • ESM规范
  • HTTP2.0特性
avatar
文章
阅读
粉丝