vite学习笔记｜青训营本节课，讲师将前置介绍有关前端工程基本知识，同时讲解前端构建工具及解决问题，进而引出作为前端

本节课，讲师将前置介绍有关前端工程基本知识，同时讲解前端构建工具及解决问题，进而引出作为前端构建工具的 Vite是什么及其在开发过程中的应用。

为什么使用构建工具

前端是有一系列资源组成的，js 代码，css样式，静态资源，他们产生了一系列的资源，他们有一系列的问题，而构建工具就是解决这些问题的：

模块化

前端模块化有一些列常用的规范，但是还没有形成统一

解决：提供统一的模块加载方案，实现统一的模块规范

资源编译

js ， ts ，jsx 浏览器不认识，我们需要把他们编译成浏览器认识的

解决：构建工具会集成一些工具，实现语法转义和资源加载

构建产物质量

代码需要压缩，兼容性问题，比如移动端需要兼容低端浏览器

解决：产物压缩、无用代码删除，语法降级

开发效率

需要热更新

解决：提供热更新系统

Vite

vite 是新一代前端构建工具，No-bundle开发，源文件不需要打包，生成环境基于 rollup ，它的特点是：高性能，dev和热更新都很快，简单易用

vite 基于原生ESM开发服务 vite dev serve，无需打包项目源码，天然按需加载，可以利用文件级的浏览器缓存

vite 使用 go 开发的 esbuild 工具，摒弃了原生js开发的弊端

vite 内置了很多webpack的基础设置，包括 css 的解析，html 插件等等

Vite的使用

我们还是要首先下载依赖

pnpm i vite -g

之后我们就可以直接初始化一个 vite 项目了

pnpm create vite

之后依次输入项目名称，框架（这里以react为例），语言（js/ts），进入项目，运行 pnpm install 下载所有的依赖就可以运行它了，之后可以看到在package.json 文件中有三条命令，分别是启动项目，打包和预打包

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

vite 项目不需要任何配置就可以解析 ts tsx 这些组件，css，scss，less这些样式以及各类资源文件

对于样式，你可以在vite项目中使用 css module的形式编写样式，这样引入的样式名称在编译中会变成一个转换为一个唯一的hash值。这样可以有效解决类名冲突等问题，你们你有多个 css 模块可能使用了同一个类名字

//index.modules.scss
.main{
    color:red;
}

//app.tsx
import styles from './index.modules.scss';

<p className = {styles.main}></p>

对于资源的引用，你只需要在对于位置引入它，然后在 src 绑定他就行了，无论你使用什么路径引入，vite都会自动将他转化成相对路径

import reactLogo from './assets/react.svg'

<img src={reactLogo} className="logo react" alt="React logo" />

vite 默认使用热更新的方式，无需配置

vite 打包默认删去未使用的代码进行 tree-shaking

在 vite.config.ts 这个文件中，我们可以配置我们需要的插件，比如刚刚初始化的项目，我们需要引入一个 react的插件，当然你使用 vue 的话，可以引入vue的组件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

vite的架构

Vite 进阶

底层工具

esbuild 官方文档：esbuild.github.io/

rollup 官方文档：rollupjs.org/guide/

推荐先了解基本使用在了解插件开发

插件

插件的作用是抽离核心逻辑，易于维护，易于拓展，生态丰富

vite 插件的钩子 hooks：你可以在对于的钩子处调用它实现不同的功能

插件的开发可以参考这个：cn.vitejs.dev/guide/api-p…

代码分割

vite 之前的打包一般代码都在一个文件里，无法进行并发求情，缓存利用率低，修改任何文件，都需要重新打包。

拆包就是就是把核心代码分成多个包，如果一个包修改了，其他包不受影响，学习 rollup 的代码分割，vite 就是基于 rollup 的代码分割的

babel

js 的语法标准繁多，但是浏览器支持不一致，但是开始想要使用高级的语法，babel 就是把高级代码进行降低的工具，原理可以查看官网文档：babeljs.io/docs/en/

并且babel 也可以配置插件，你也可以自己编写其插件，你可以查看这个手册来学习：github.com/jamiebuilds…

这是一种常见的渲染模式，用于优化提升首屏幕的性能。vite提供了 vite-ssr 项目打包渲染的方案，可以查看官方文档 cn.vitejs.dev/guide/ssr.h…

底层标准

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

社区生态

vite 提供了良好的社区生态，社区可以有大量的其他开发者编写的插件等，可以前往寻找你需要的组件： github.com/vitejs/awes…

vite学习笔记 ｜ 青训营

为什么使用构建工具

Vite

Vite的使用

vite的架构

Vite 进阶

vite学习笔记｜青训营