Vite知识体系|青训营

云沐清
64 阅读5分钟

1、浅谈构建工具

  • 1.1前端为何要使用构建工具？

随着前端发展，涉及到的资源是越来越多，如何搞笑快速的进行资源管理问题避无可避，正是由于传统的资源管理方式所带来的一系列弊端，推荐了构建工具的诞生。

  • 1.2构建工具从四个方面进行描述：

  1. 模块化：ESM、CommonJs、UMD

    模块化方案

    1. 提供模块加载方案

    2. 兼容不同模块规范

  2. 资源编译： 高级语法的编译

    语法转译

    1. 高级语法转译：如Sass、TypeScript

    2. 资源加载：如图片、字体、worker

  3. 产物质量： 代码体积、代码性能

    方案: 产物压缩、无用代码删除、语法降级

  4. 开发效率： 热更新

2、Vite概要介绍

  • 2.1Vite是什么？Why Vite?

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

两大组成部分：

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

核心特征：

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

传统构架工具遇到的问题

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

瓶颈

  1. bundle带来的性能开销
  2. JS语言的性能瓶颈

3、Vite上手实战

  • 3.1、Vite项目初始化
# 提前安装 pnpm (需管理员权限)
npm i -g pnpm

# 初始化命令
pnpm create vite

# 安装依赖
pnpm install

# 项目启动
npm run dev
  • 3.2、使用Sass/Scss & Css Modules

安装Sass

pnpm i sass -D

目录结构

src.png

index.module.scss

.header {
  color: red;
}

index.tsx

import styles from './index.module.scss';
export function Header(){
  return <p className={styles.header}>This is Header</p>
}
  • 3.3、生产环境 Tree Shaking

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

优化原理

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

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

4、Vite整体架构

  • 关键技术：依赖预打包

为什么要进行预打包？

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

实现原理：

  1. 服务器启动前扫描代码中用到的依赖
  2. 用Esbuild对依赖代码进行滚预打包
  3. 改写import语句，指定依赖为预构建产物路径
//改写前
import React from "react";
//改写后
import React from '/node_nodules/.vite/react.js'
  • 关键技术：单文件编译

es.png

  • 关键技术：代码压缩

image.png

  • 关键技术：插件机制

image.png

5、Vite进阶路线

  • 深入双引擎
  1. Esbuild
  2. Rollup

  • 推荐学习顺序：

    1. 先了解基本使用，动手尝试各项常用配置
    2. 然后学习其插件开发

  • 为什么需要插件机制？

    1. 抽离核心逻辑

    2. 易于拓展

  • Vite插件开发 image.png

  • 参考资料

Vite插件开发文档

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

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

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

  • 代码分割（拆包） image.png

  • JS编译工具（Bable）

  • 出现原因：

    1. JS语法标繁多，浏览器支持程度不一
    2. 开发者需要用到高级语法 参考资料：babe官方站点、bable插件手册

  • 语法安全降级 image.png

  • 如何避免

  1. 上层解决方案：@vite.js/plugin-legacy
  2. 底层解决
    1. 借助Bable进行语法自动降级
    2. 提前注入Polyfill实现，如core-js,regenerator-runtime

参考资料

  1. @bable/preset-env文档
  2. Vite官方降级插件文档
  • 服务器渲染（SSR)

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

image.png

  • 深入了解底层标准

image.png

6、小结

1. 基本概念： 了解 Vite 的基本概念是使用它的前提。这包括了对Vite的工作原理、开发模式和构建模式的理解。Vite采用了基于ES模块的开发模式，通过原生ES模块的特性实现了快速的冷启动和热模块替换。

2. 安装和配置： 学习如何安装和配置Vite是使用它的第一步。Vite可以通过npm或yarn进行安装，并且提供了一些配置选项，例如自定义端口、代理设置、构建选项等。

3. 开发环境： 了解如何在 Vite 中进行开发是非常重要的。Vite支持热模块替换（HMR），可以实时更新修改的代码，提供了快速的开发反馈。此外，Vite还支持在开发过程中使用TypeScript、CSS预处理器（如Sass、Less）和模块化的CSS。

4. 构建和优化： 学习如何使用Vite进行构建和优化是提高项目性能的关键。Vite使用Rollup作为底层构建工具，可以生成高效的生产构建。此外，Vite还提供了代码分割、按需加载、预渲染等优化功能，以提高应用程序的加载速度和性能。

5. 插件系统： 了解Vite的插件系统可以帮助扩展其功能。Vite的插件系统基于Rollup插件生态系统，可以通过编写自定义插件来实现各种功能，例如添加自定义的构建步骤、处理特定类型的文件、优化代码等。

6. 生态系统和工具链： 了解Vite的生态系统和与其他工具的集成是使用Vite的一部分。Vite与常用的前端框架（如Vue、React、Angular）和工具（如ESLint、Prettier）有良好的集成，可以与它们无缝配合使用。

7. 部署和发布： 学习如何将Vite构建后的应用程序部署到生产环境是使用Vite的最后一步。Vite生成的构建产物可以通过静态文件服务器进行部署，也可以与后端服务器集成。

avatar
文章
阅读
粉丝