Vite | 青训营笔记

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

构建工具

1. 模块化

   ESM，CommonJS，UMD

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

2. 资源编译

高级语法转译，如Scss，TypeScript

资源加载，如图片，字体

3. 产物质量

   代码体积，代码性能

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

4. 开发效率

   热更新

Vite概要介绍

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

两大组成部分：

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

核心特征：

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

基于原生 ESM 的开发服务优势

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

基于 Esbuild 的编译性能优化

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

内置的 Web 构建能力

Vite上手实战

    npm create vite //初始化命令
    npm install //安装依赖
    npm run dev //启动项目

使用 Scss & CSS Modules

使用静态资源

除了常见是图片格式，Vite也内置了对 JSON、worker资源的加载支持

使用HMR

默认自动开启

生产环境 Tree Shaking

默认自动开启

优化原理：

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

Vite整体架构

依赖预打包

1. 避免 node_modules 过多的文件请求
2. 将CommonJs 格式转为 ESM 格式

实现原理

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

单文件编译

用 Esbuild 编译 TS/JSX

优势： 编译速度提升

代码压缩

插件机制

开发阶段 —— 模拟 Rollup 插件机制 生产阶段 —— 直接使用 Rollup

Vite进阶路线

了解基本使用（常用的配置） —— 前端性能优化、学习插件开发 —— 阅读源码，理解核心技术原理