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

Vite 知识体系

一.浅谈构建工具

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

• 模块化开发

• 资源编译

  • 如ts，JSX等高级语言是浏览器不认识的，所以需要编译成JS

• 产物质量

  • 考虑线上代码压缩体积，上线时用不上的需要剔除
  • 语法兼容性，IE4等

• 开发效率

  • 比如改动代码后，需要立即看到效果

2.前端构建工具的意义

• 模块化开发

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

• 语法转译

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

• 产物质量

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

• 开发效率

  • 热更新

二.Vite 概要介绍

1.概览

• 两大组成部分

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

• 核心特征

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

2.当下问题

1. 缓慢的启动 -> 项目编译等待成本高
2. 缓慢的热更新 -> 修改代码后不能实时更新

• 瓶颈：

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

3.浏览器原生 ESM 支持

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

4.基于 Esbuild 的编译性能优化

5. Vite 开箱即用的功能等价

• webpack
• webpack-dev-server
• css-loder
• style-loader
• less-loader
• sass-loader
• postcss-loader

三.Vite 上手实战

1.项目初始化

# 提前安装pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
​
#1.项目名称
#2.选择语言框架
#3. cd  命令进入到项目中
​
# 安装依赖
pnpm install
​
# 启动项目
npn run dev
​
# dev:开发阶段,启动项目
# build:项目打包
# preview:

2.使用 Sass/Scss & CSS Modules

3.使用 Scss & CSS Modules

4.使用静态资源

cn.vitejs.dev/guide/featu…

5.使用 HMR

无需额外配置，自动开启

6.生产环境 Tree Shaking

优化原理：

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

// CommonJS 格式做不到 Tree Shaking
// require 的部分可能依赖运行时计算的结果

四.Vite 整体架构

• 为什么要进行预打包？

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

• 实现原理

  1. 服务启动前扫描代码中用到的依赖
  2. 用 Esbuild 对依赖代码进行预打包
  3. 改写 import 语句，指定依赖为构建产物路径