Vite 知识体系 ｜ 青训营笔记

行下星暇
98 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

一、本堂课重点内容：

Vite基本概要

  • 前端工程的痛点
  • 前端构建工具的意义
  • Vite 概览
  • Vite 业界案例
  • Vite 优势

Vite上手实战与架构解析

  • 项目初始化
  • 使用 Sass/Scss & CSS Modules
  • 使用静态资源
  • 生产环境 Tree Shaking

Vite进阶路线

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

二、详细知识点介绍：

1.Vite基本概要

1.1 前端工程的痛点

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

1.2 前端构建工具的意义

模块化方案

  1. 提供模块加载方案
  2. 兼容不同模块规范

语法转译

  1. 高级语法转译，如Sass、TypeScript
  2. 资源加载，如图片、字体、worker

产物质量

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

开发效率

  • 热更新

1.3 Vite 概览

image.png

定位: 新一代前端构建工具?

两大组成部分:

  1. No-bundle开发服务，源文件无需打包
  2. 生产环境基于Rollup 的 Bundler

核心特征:

  1. 高性能,dev启动速度和热更新速度非常快!
  2. 简单易用，开发者体验好

1.4 Vite 业界案例

image.png

Rollup -> Vite

  • 启动时间: 2分15秒->1.7秒
  • 更新时间: 23秒->1秒以内
image.png

Webpack -> Vite

  • 启动时间: 2分36秒->6秒
  • 热更新: 13秒->1秒以内

1.5 Vite 优势

[原前端构建工具遇到的问题]

  • 缓慢的启动->项目编译等待成本高
  • 缓慢的热更新->修改代码后不能实时更新
  • bundle带来的性能开销
  • JavaScript语言的性能瓶颈

[Vite的优势]

原生ESM支持

两大要素:

  1. script标签增加 type="module”属性
  2. 2.使用ESM模块导入导出语法

基于ESM的开发服务优势

  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存

基于Esbuild的编译性能优化

image.png

Esbuild -- 基于Golang开发的前端工具，具备如下能力:

  1. 打包器Bundler
  2. 编译器Transformer
  3. 压缩器Minifier

[性能极高，在Vite中被深度使用]

内置的Web构建能力

image.png image.png

2. Vite上手实战与架构解析

2.1 项目初始化

image.png

2.2 使用 Sass/Scss & CSS Modules

[Sass]

image.png

安装 Sass

pnpm i sass -D

index.tsx

import styles from './index.module.scss ';
//使用Css Modules模块化方案，防止className命名冲突
export function Header() i
return <p className={styles.header}>This is Header</p>};

index.module.scss

.header {
color: red;
}

[CSS Modules]

image.png

2.3 使用静态资源

image.png

以svg图片为例

App.tsx

import { Header } from " ./components/Header";import logoUrl from './logo.svg';
function App(){
    return (
    <div>
    <Header />
    <img src={logoUrl} alt=""/>
    </div>
   );
}

export default App;

除了常见的图片格式, Vite也内置了对于JSON、Worker、 WASM资源的加载支持

2.4 生产环境 Tree Shaking

image.png

优化原理∶

  1. 基于ESM的 import/export语句依赖关系，与运行时状态无关
  2. 在构建阶段将未使用到的代码进行删除
image.png

Tree Shaking在Vite中无需配置，默认开启

2.5 Vite整体框架

image.png

关键技术:

[单文件翻译]

用Esbuild编译TS/JSX

优势:

  • 编译速度提升10-100

局限性:

  • 不支持类型检查
  • 不支持语法降级到ES5
image.png

[代码压缩]

image.png

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

[插件机制]

image.png
  • 开发阶段->模拟Rollup插件机制
  • 生产环境->直接使用Rollup

3.Vite进阶路线

3.1 深入双引擎

image.png

3.2 Vite 插件开发

需要插件机制的原因

  • 抽离核心逻辑
  • 易于拓展
image.png

插件示例

image.png image.png
  1. 开发Vite插件
  2. 配置文件引入插件
image.png

3.3 代码分割(拆包)

image.png

参考资料:

cn.vitejs.dev/config/buil…

rollupjs.org/guide/en/#o…

3.4 JS 编译工具(Babel)

image.png

出现的原因:

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

3.5 语法安全降级

image.png image.png

3.6 服务端渲染(SSR)

image.png

3.7 深入了解底层标准

image.png

参考资料:

hacks.mozilla.org/2018/03/es-…

antfu.me/posts/publi…

3.8 Vite 社区生态

Github 40k+ star (可参考webpack 61.3 K, rollup 21.8 k),并且目前还在持续维护

官方提供插件:

  • @vitejs/plugin-vue,提供Vue 3支持
  • @vitejs/plugin-vue-jsx,提供Vue 3 JSX支持
  • @vitejs/plugin-react,提供 React支持
  • @vitejs/plugin-legacy,提供低版本浏览器降级支持

海量社区插件:github.com/vitejs/awes…

众多框架内置:

image.png

三、实践练习例子：

引入 Header组件

  • App.tsx
import { Header } from "./components/Header";
function App( {
   return (
     <div>
        <Header />
     </div>
   );
}

export default App;

四、课后个人总结：

经过本章Vite知识体系的学习，我清楚了前端构建工具Vite的功能，以及Vite相对于传统构建工具的优势，在章节学习中，Vite的实战和解析环节是比较复杂的；我也了解清楚了Vite的进阶路线，使我更加理解Vite。

avatar
文章
阅读
粉丝