Vite 知识体系

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

1.为什么需要构建工具

1.1前端工程的痛点

• 模块化

  • ESM、 CommonJS、 UMD

• 资源编译

  • 高级语法的编译

• 产物质量

  • 代码体积、代码性能

• 开发效率

  • 热更新

1.2前端构建工具的意义

• 模块化方案

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

• 语法转译

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

• 产物质量

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

• 开发效率

  • 热更新

2.Vite是什么？Why Vite?

2.1Vite概览

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

• 两大组成部分:

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

• 核心特征

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

2.2当下问题

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

瓶颈在哪里?

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

2.3两大行业趋势

• 全球浏览器对原生ESM普遍支持
• 基于原生语言编写前端编译工具链
• 如Go编写的Esbuild,Rust编写的SWC

2.4浏览器原生ESM支持

两大要素:

1.script标签增加type="module”属性

2.使用ESM模块导入导出语法

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

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

2.6基于Esbuild的编译性能优化

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

1.打包器Bundler

2.编译器Transformer

3.压缩器Minifier

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

2.7内置的 web 构建能力

Vite开箱即用的功能等价于

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader
• sass-loader
• postcss-loader
• file-loader
• MiniCssExtractPlugin
• HTMLWebpackPlugin
• ......

3.Vite 上手使用

3.1项目初始化

 #提前安装pnpm
 npm i -g pnpm
 ​
 #初始化命令
 pnpm create vite
 ​
 #安装依赖
 pnpm install
 ​
 #启动项目
 npm run dev

3.2生产环境

优化原理:

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

4.Vite整体架构

4.1关键技术:依赖性打包

为什么要进行预打包?

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

实现原理:

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

4.2关键技术:单文件编译

用Esbuild 编译TS/JSX

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

局限性:

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

4.3关键技术:代码压缩

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

4.4关键技术:插件机制

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

5.Vite进阶路线

5.1深入双引擎

推荐学习顺序:

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

5.2代码分割(拆包）

问题:

• 无法进行并发请求
• 缓存复用率低

5.3JS编译工具(Babel)

出现的原因:

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

5.4语法安全降级

• 如何在构建产物中避免这类问题?

  • 上层解决方案: @vitejs/plugin-legacy

  • 底层原理

    • 借助 Babel进行语法自动降级
    • 提前注入Polyfill 实现，如core-js、regenerator-runtime

5.5服务端渲染(SSR)

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

5.6Vite社区生态

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

官方提供插件:

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

众多框架内置

• Nuxt
• Sveltekit
• Astro
• Vitepress