# vite-project

**Repository Path**: codinglin/vite-project

## Basic Information

- **Project Name**: vite-project
- **Description**: Vite 介绍与实践
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-12
- **Last Updated**: 2022-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, vite, Sass

## README

## Vite 实践

1. 项目初始化
  - npm i -g pnpm  // 提前安装 pnpm

  - pnpm create vite  // 初始化命令

  - pnpm install  // 安装依赖

  - npm run dev  // 启动项目

2. 使用 Sass/Scss & CSS Modules
  - npm i sass -D  // 安装 sass 开发依赖

  使用 CSS Modules 模块化方案，防止类名冲突 
  className={styles.header}

3. npm run build 打包
  tsc(TypeScript的官方工具) 用来进行类型检查
  build: {
    minify: false  // 打包不压缩
  }

4. 生产环境 Tree Shaking(在 Vite 中无需配置，默认开启)
  - 优化原理：
    1. 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
    2. 在构建阶段将未使用到的代码进行删除

## Vite 给你最直观的印象
  1. 响应迅速
  2. 开箱即用

## 关键技术

### 依赖预打包

  - 为什么要进行预打包？
    1. 避免 node_modules 过多的文件请求
    2. 将 CommonJS 格式转换为 ESM 格式
  - 实现原理
    1. 服务启动前扫描代码中用到的依赖
    2. 用 Esbuild 对依赖进行预打包
    3. 改写 import 语句，指定依赖为预构建产物路径

### 单文件编译
  - 用 Esbuild 编译 TS/JSX

  优势：编译速度提升 10-100 倍
  局限性：1. 不支持类型检查 2. 不支持语法降级到 ES5

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

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