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

vite学习

vite概要介绍

前端架构的意义

vite是新一代线段构建工具

两大组成部分

1. No-bundle 开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundler

核心特征

1. 高性能，dev启动速度和热更新非常快
2. 简单易用，开发者体验

相比于其他构建工具的优势

其他工具的劣势

1. bundle带来的性能消耗
2. js语言的性能瓶颈

vite的优势

1. 两大行业的趋势
   • 全球浏览器对于原生ESM的普遍支持
   • 基于原生语言（Go，Rust）编写前端编译工具链
2. 浏览器原生的ESM支持

3. 基于原生ESM的开发服务优势
   • 无需打包项目源代码
   • 天然的按需加载
   • 可以利用文件级的浏览器缓存
4. 基于Esbuild的编译性能优化,Esbuild性能极高，在vite中被深度使用

Esbuild是基于Golang开发的前端工具，具备如下能力：打包器Bundler,编译器Transformer，压缩器Minnifiler

5. 内置的web构建能力，相比于webpack配置代码锐减
6. Vite在大型项目开发模式下，打包速度远高于[webpack]

vite上手实战

项目初始化步骤

1. 安装pnpm npm i -g pnpm
2. 初始化命令pnpm create vite
3. 安装依赖pnpm install
4. 启动项目npm run dev

使用Sass/Scss&CSS Module

目录结构

安装Sass pnpm i sass -D index.tsx

import styles from './index.module.scss'
//使用Css Modules模块化方案，防止className命名冲突
exports function Header(){
    return <p className={styles.header}>III<p/>

index.modules.scss

.header {
    color:red;
}

App.tsx

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

使用静态资源

除了常见了图片样式，vite也内置了对json，worker，WASM资源的加载支持

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;

使用HMR

生产环境Tree-Shaking

vite整体架构

关键技术：依赖预打包

为什么要进行预打包

1. 避免node_nodules过多的文件请求
2. 将commonJS格式转换为ESM格式

实现原理

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

//改写前
import React from 'react'
//改写后
import React from '/node_nodules/.vite/react.js'

关键技术：单文件编译

用Esbuild编译Ts/jsx 优势 编译速度提升10-100x 局限性 不支持类型检查 不支持语法降级到ES5

关键技术：代码压缩

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

关键技术：插件机制

vite进阶路线

深入双引擎

1. esbuild官方文档
2. rollup.js 官方文档

vite插件开发

代码分割

JS编译工具(Babel)

服务端渲染(SSR)