Vite 知识体系 | 青训营笔记

北冥_有鱼
161 阅读4分钟

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

Vite 知识体系

1.浅谈构建工具

前端工程的痛点

  • 模块化

    • ESM、 CommonJS、 UMD

  • 资源编译

    • 高级语法的编译

  • 产物质量

    • 代码体积、代码性能

  • 开发效率

    • 热更新

前端构建工具的意义

  • 模块化方案

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

  • 语法转译

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

  • 产物质量

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

  • 开发效率

    • 热更新

2.vite要介绍

Vite概览

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

  • 两大组成部分:

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

  • 核心特征

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

当下问题

开发体验问题日渐显露!

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

瓶颈在哪里?

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

浏览器原生ESM支持

两大要素:

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

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

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

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

基于Esbuild的编译性能优化

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

1.打包器Bundler

2.编译器Transformer

3.压缩器Minifier

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

内置的 web 构建能力

Vite开箱即用的功能等价于

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

3.vite 上手实战

项目初始化

#提前安装pnpm

npm i -g pnpm

#初始化命令

pnpm create vite

安装依赖

pnpm install

#启动项目

npm run dev

目录结构

  • src

    • App.css

    • App.tsx

    • components

      • Header

        • index.module.scss
        • index.tsx

    • favicon.svg

    • index.css

    • logo.svg

    • main.tsx

    • vite-env.d.ts

生产环境

优化原理:

1.基于ESM的import/export语句依赖关系，与运行时状态无关

2.在构建阶段将未使用到的代码进行删除

4.vite 中整体架构

image.png

依赖性打包

为什么要进行预打包?

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

实现原理:

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

单文件编译

用Esbuild 编译TS/JSX

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

局限性:

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

代码压缩

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

插件机制

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

5.vite进阶路线

深入双引擎

参考资料：

Esbuild官方文档

Rollup官方文档

推荐学习顺序:

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

Vite插件开发

image.png

vite都件开发

参考资料:

Vite插件开发文档

复杂度较低的插件: json加载插件

复杂度中等的插件: Esbuild接入插件

复杂度较高的插件:官方React插件

代码分割（拆包）

拆包前

image (1).png

拆包后

image (2).png

问题:

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

编译工具

出现的原因:

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

语法安全降级

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

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

    • 底层原理

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

服务端渲染(SSR)

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

image.png

vite社区生态

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,提供低版本浏览器降级支持

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

众多框架内置

  • Nuxt
  • Sveltekit
  • Astro
  • Vitepress
avatar
文章
阅读
粉丝