Vite知识体系（二）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 13 天 03Vite上手使用项

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

03Vite上手使用

项目初始化

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

输入初始化参数

启动后截图

启动完成后，打开浏览器访问对应地址即可

使用Sass/Scss & CSS Modules

目录结构

src
- App.css
- App.tsx
- components
  - Header
    - index.module.css
    - index.tsx
- favicon.svg
- index.css
- logo.svg
- main.tsx
- vite-env.d.ts

安装Sass

pnpm i sass -D

index.tsx

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

index.module.scss

.header {
    color: red;
}

引入Header组件

App.tsx

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

以svg图片为例

App.tsx

import {Header} from "./components/Header";
import logoUrl from './logo.svg';
function App() {
    return (
        <div>
            <Header />
            <img src={logoUrl} alt="" />
        </div>
    );
}
export default App;

除了常见的图片格式，Vite也内置了对于JSON，Worker，WASM资源的加载支持

使用HRM

无需额外配置，自动开启

生产环境Tree Shaking

优化原理：

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

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

Vite给人最直观的印象

相应迅速
开箱即用

04Vite整体架构

关键技术：依赖预打包

为什么要进行预打包？

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

实现原理：

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

关键技术：单文件编译

用Esbuild编译TS/JSX

优势

编译速度提升10-100x

局限性

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

关键技术：代码压缩

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

关键技术：插件机制

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

Vite知识体系（二）｜ 青训营笔记