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

Vite学习记录

Vite基本概要

前端构建工具的意义

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

什么是Vite

Vite 的定位是新一代前端构建工具。
Vite由两个部分组成的：

No-bundle 开发服务，源文件无需打包
生产环境基于 Rollup 的 Bunder 其核心特征：
高性能，dev 启动速度和热更新速度非常快
简单易用，开发者体验好

浏览器原生 ESM 支持

其两大要素：

script 标签增加 type = "module" 属性
使用 ESM 模块导入导出语法基于原生 ESM 的开发服务优势：

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

基于 Esbuild 的编译性能优化

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

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

Vite的内置的 Web 构建能力

Vite 开箱即用的功能相当于 webpack、webpack-dev-server、css-loader等等。

export defalut{
    entry: './src/index.ts',
    module: {
        rule: {
            test:/\.[tj]sx?$/,
            use: [
                loader: 'babel-loader'
                options:{
                    presets: ['@babel/preset-env','@babel/preset-typescript'],
                }
            ]
        },
        {
            test:/\.s[ac]ss$/,
            use: [
                procsee.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader:'style-loader',
                {
                    loader: 'css-loader'
                    options:{
                        modules:true
                    }
                },
                'postcss-loader',
                'sass-loader'
            ]
        },
        {
            test./\.css$/,
            use: [
                process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader: 'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                },
                'postcss-loader',
            ]
        },
    }
},
plugins:[
    new MiniCssExtractPlugin(),
    new HTMLWebpackPlugin
]
};

如上的 webpack.config.ts 的文件代码就相当于如下的vite.config.ts代码：

import { defineConfig ] from 'vite
import react from '@vitejs/plugin-react
export default defineConfig({plugins:[react()]
})

Vite的使用

首先是需要使用npm i -g pnpm命令安装pnpm，然后使用pnpm create vite命令进行初始化，pnpm install安装依赖，最后使用npm run dev启动项目。
目录结构如下：其中，index.tsx的内容如下：

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

在App.tsx中引入Header组件：、

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

生产环境 Tree Shaking

优化原理：

基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
在构建阶段将未使用到的代码进行删除 Tree Shaking 在 Vite 中无需配置，默认开启。

Vite整体架构

基本架构：

依赖项打包

进行预打包的优点

1.避免 node modules 过多的文件请求 2.将 CommonJS 格式转换为 ESM 格式

实现原理

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

import React from "react";

改写后：

import React from '/node_modules/.vite/react.js'

单文件编译——使用 Esbuild 编译 TS/JSX

优势

编译速度提升 10-100 x

局限性

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

代码压缩

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

插件机制

开发阶段

采用模拟 Rollup 插件机制

生产环境

直接使用 Rollup

Vite的进阶——Vite 插件开发

为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展通过上述的Hook，我们可以在不同的构建阶段插入自定义的逻辑。

总结

本次学习中，学习了什么是 Vite，了解了 Vite 的 Web 能力，是一个非常好用的工具。学习了如何使用 Vite 工具，从安装到项目运行。
还学习了 Vite 的整体架构，在架构中，拥有不少的便利的功能，比如，依赖项打包、单文件编译、代码压缩等等。

Vite学习记录｜青训营笔记