vite ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第N天一、本堂课重点内容：本堂课主要讲述了构建工具

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

一、本堂课重点内容：

本堂课主要讲述了构建工具、vite概要介绍、vite上手实战、vite整体架构和vite进阶路线等等。

二、详细知识点介绍：

模块化 ESM、CommonJS、UMD
资源编译高级语法的编译
产物质量代码体积、代码性能
开发效率热更新

前端构建工具的意义

模块化方案
1. 提供模块加载方案
2. 兼容不同模块规范
语法转译
1. 高级语法转译，如Sass、TypeScript
2. 资源加载，如图片、字体、worker
产物质量
1. 产物压缩、无用代码删除、语法降级
开发效率
1. 热更新

vite概要介绍

定位:新一代前端构建工具

两大组成部分:
1. No-bundle开发服务，源文件无需打包
2. 生产环境基于 Rollup的 Bundler
核心特征
1. 高性能,dev启动速度和热更新速度非常快
2. 简单易用，开发者体验好

两大行业趋势

全球浏览器对原生ESM的普遍支持(目前占比92%以上)
基于原生语言(Go、Rust)编写前端编译工具链,如Go语言编写的Esbuild、Rust编写的SWC

浏览器对ESM支持

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test esm</title>
</head>
<body>
    <script type="module">
        import {foo} from './foo.js'
        console.log(foo)
    </script>
</body>
</html>

foo.js

export const foo = 'foo'

两大要素:

script标签增加type="module”属性
使用ESM模块导入导出语法

无需打包项目源代码
天然的按需加载
可以利用文件级的浏览器缓存

Esbuild—基于Golang开发的前端工具,具备如下能力:

打包器Bundler
编译器Transformer
压缩器Minifier

性能极高,在 Vite 中被深度使用

生产环境Tree Shaking

优化原理:

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

Tree Shaking在Vite中无需配置，默认开启!
CommonJS 格式不能做到Tree Shaking
require 的部分可能依赖运行时计算的结果 require( someVariable )

vite整体架构

预打包

为什么要进行预打包?

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

实现原理:

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

//改写前
import React from "react";
//改写后
import React from '/node_modules/.vite/react.js'

用Esbuild编译TS/JSX

优势:编译速度提升10-100 x

局限性:

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

ESbuild minify

代码压缩

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

插件机制

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

vite进阶路线

ESbuild:esbuild - 极速 JavaScript 打包器 (docschina.org)

rollup:rollupjs.org/guide/en/

推荐学习顺序: 先了解基本使用，动手尝试各项常用配置;然后学习其插件开发。

插件

抽离核心逻辑，易于拓展

插件开发

1.服务启动阶段

graph LR
    config --> configResolved --> options --> configureServer --> buildStart

2.请求响应阶段

graph LR
    transformIndexHtml
    resolveId --> load --> transfrom

3.热更新阶段

graph LR
    handleHotUpdate

4.服务关闭阶段

graph LR
    buildEnd --> closeBundle

通过上述的Hook，我们可以在不同的构建阶段插入自定义的逻辑

参考资料:

Vite插件开发文档
复杂度较低的插件: json加载插件
复杂度中等的插件: Esbuild接入插件
复杂度较高的插件:官方React插件

代码分割(拆包)

拆包前

拆包后

JS编译工具(Babel)

AST：抽象语法树

出现的原因:

JavaScript语法标准繁多,浏览器支持程度不一
开发者需要用到高级语法

babel官网babeljs.io/docs/en/

babel插件github.com/jamiebuilds…

语法安全降级

上层解决方案: @vitejs/plugin-legacy
底层原理

借助Babel进行语法自动降级
提前注入Polyfill实现，如core-js、regenerator-runtime

参考资料: @babel/preset-env文档

Vite官方降级插件文档

服务端渲染(SSR)

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

构建阶段

代码执行阶段

底层标准

hacks.mozilla.org/2018/03/es-…

antfu.me/posts/publi…

gist.github.com/sindresorhu…

三、实践练习例子：

Vite项目初始化

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

使用SCSS模块

安装sass

pnpm i sass -D

index.tsx

import styles from './index.module.scss'
export function Header(){
    return <div className={styles.header}>Header</div>
}

index.module.scss

.header{
    color: khaki;
}

引入Header组件 App.tsx

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

使用静态资源

以svg图片为例

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资源的加载支持

HMR

HMR可以保持除了当前组件，其他组件的状态

插件

Vite插件示例

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 //如果可行将提供source map
            }
        }
    }
}

使用插件

// vite.config.js
import plugin from './myPlugin'
export default defineConfig({
    plugins: [plugin()]
})

vite ｜ 青训营笔记