Vite基本概要 | 青训营笔记

沃德斌
44 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天.

Vite是什么

定位:新一代前端构建工具两大组成部分:

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

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

要解决的问题

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

image.png

如何使用Vite

项目初始化

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

image.png

使用Sass/Scss & CSS Modules

image.png

import styles from ' ./index.module.scss ' ;
//使用CSS Modules模块化方案，防止 className命名冲突
export function Header( {
return <p className=istyles.header}>This is Header</ p>};

使用Scss/Scss & CSS Modules

image.png

import { Header } from " ./components/Header" ;
function App() {
return (
<div>
<Header /></ div>
);
}
export default App;

Vite整体架构

关键技术:依赖预打包

实现原理:

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

关键技术:单文件编译

用Esbuild 编译TS/JSX

  • 优势:编译速度提升10-100x
  • 局限性: 不支持类型检查 不支持语法降级到ES5

关键技术:代码压缩

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

image.png

关键技术:插件机制

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

Vite插件开发

  1. 服务启动阶段
  2. 请求响应阶段
  3. 热更新阶段
  4. 服务关闭阶段

image.png

Vite社区生态

官方提供插件:

  • @vitejs/plugin-vue,提供Vue 3支持
  • @vitejs/plugin-vue-jsx,提供Vue 3 JSX支持@vitejs/plugin-react,提供React支持
  • @vitejs/plugin-legacy,提供低版本浏览器降级支持
avatar
文章
阅读
粉丝