Vite 知识体系 | 青训营笔记

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

0x1 浅谈构建工具

前端工程的痛点
1. 模块化
2. 资源编译
3. 产物质量
4. 开发效率
前端构建工具的意义
1. 模块化方案
  1. 提供模块加载方案
  2. 兼容不同模块规范
2. 语法转译
  1. 高级语法转译
  2. 资源加载
3. 产物质量
  1. 产物压缩
  2. 无用代码删除
  3. 语法降级
4. 开发效率
  1. 热更新

0x2 Vite 概要介绍

Vite 概览
- 定位：新一代前端构建工具
- 组成部分
  - No-bundle 开发服务，源文件无需打包
  - 生产环境基于 Rollup 的 Bundle
- 核心特征
  - 高性能，dev 启动速度和热更新速度非常快
  - 简单易用，开发者体验好
当下问题
1. 缓慢的启动：项目编译等待成本高
2. 缓慢的热更新：修改代码后不能实时更新
行业趋势
1. 各大浏览器对原生 ESM(ECMA Script Modules) 的普遍支持
  1. 浏览器原生 ESM 支持
    1. script 标签增加type="module"属性
```
<script type="module">
    import { foo } from './foo.js'
    console.log(foo)
</script>
```
    2. 使用 ESM 模块导入导出语法
  2. 基于原生 ESM 的开发服务优势
    1. 无需打包项目源代码
    2. 天然的按需加载
    3. 可以利用文件级的浏览器缓存
2. 基于原生语言（如：Go——Esbuild，Rust——SWC）编写前端编译工具链
  1. 基于 Esbuild 的编译性能优化
    
    基于 Golang 开发的前端工具 Esbuild 具备以下能力：
    - 打包器：Bundler
    - 编译器：Transformer
    - 压缩器：Minifier

0x3 Vite 上手实战

项目初始化
1. 安装 pnpm：npm i -g pnpm
2. 初始化命令：pnpm create vite
3. 输入初始化参数（使用 React）
4. 安装依赖：pnpm install
5. 启动项目：npm run dev
使用 Sass/Scss & CSS Modules
1. 目录结构
2. 安装 Sass：pnpm i sass -D
3. index.tsx
```
import styles from './index.module.scss';
export function Header() {
    return <p className={styles.header}>This is Header</p>
};
```
4. index.module.scss
```
.header {
    color: red;
}
```
5. 在 App.tsx 中引入 Header 组件
```
import { Header } from "./components/Header"
function App() {
    return (
        <div>
            <Header />
        </div>
    )
}
export default App
```

使用静态资源

举例：在 App.tsx 中引入 logo.svg

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

使用 HMR

无需额外配置，自动开启
生产环境 Tree-Shaking

无需额外配置，自动开启

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

0x4 Vite 整体架构

单文件编译

用 Esbuild 编译 TS/JSX
1. 优势：编译速度提升
2. 局限性：
  1. 不支持类型检查
  2. 不支持语法降级到 ES5
代码压缩

Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具
插件机制
- 开发阶段：模拟 Rollup 插件机制
- 生产环境：直接使用 Rollup

0x5 Vite 进阶路线

深入双引擎
- esbuild
- rollup.js
学习顺序：
1. 了解基本使用并尝试各项常用配置
2. 学习其插件开发
Vite 插件开发
- 抽离核心逻辑
- 易于拓展
1. 服务启动阶段
2. 请求响应阶段
3. 热更新阶段
4. 服务关闭阶段

插件实例

开发插件

const fileRegex = /\.(my-file-ext)$/
export default function myPlugin() {
    return {
        name: 'transform-file',
        transform(src, id) {
            if(fileRegex.test(id)) {
                return {
                    code: compileFileToJS(src),
                    map: null
                }
            }
        }
    }
}

配置文件引入插件

// filename: vite.config.js
import plugin from './myPlugin'

export default defineConfig({
    plugins: [plugin()]
})

代码分割（拆包）

拆包前存在的问题：
1. 无法进行并发请求
2. 缓存复用率低
JS 编译工具（Babel）

出现的原因：
1. JavaScript 语法标准繁多，浏览器支持程度不一
2. 对开发者使用的高级语法合理降级
语法安全降级
1. Vite 上层解决方案：@vitejs/plugin-legacy
2. 底层原理
  1. 借助 Babel 进行语法自动降级
  2. 提前注入 Polyfill 实现，如：core-js、regenerator-runtime
服务端渲染（SSR）

SSR
1. 构建阶段
2. 代码执行阶段
深入了解底层标准

重点特性：
- CJS(CommonJS) 规范
- ESM 规范
- HTTP 2.0 特性

posted @ 2023-02-11 11:16 SRIGT 阅读(6) 评论(0) 编辑收藏举报来源

刷新页面返回顶部