前端之Vite知识体系 | 青训营

2023-08-18 132 阅读3分钟

青训营学习记录笔记

Vite知识体系

01 Vite基本概要

1.1 浅谈构建工具

为什么需要构建工具
前端工程的痛点：
1. 模块化
  
  尽管React等框架已经将模块化应用很成熟，但前端的模块化标准仍需完善。
2. 资源编译
  
  对于高级语法，浏览器需要进行编译的过程。
3. 产物质量
  
  线上代码需要压缩，代码体积一般需要优化，以及代码需要一定的兼容性。
4. 开发效率
  
  如果没有构建工具，在开发中很难实时观测开发进程与页面效果，进而开发效率低下。
前端构建工具的意义
1. 模块化方案：
  1. 提供模板加载方案
  2. 兼容不同模板规范
2. 语法转译
  1. 高级语法转译
  2. 资源加载
3. 产物质量：产物压缩、无用代码删除、语法降级
4. 开发效率：热更新

1.2 Vite概要介绍

Vite的定位为新一代前端构建工具，其核心特征为：

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

Vite Dev Server的优势：

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

Vite开箱即用的功能等价于：

webpack
webpack-dev-server
css-loader
style-loader
sass-loader
......

1.3 Vite上手实战

Vite项目初始化：

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

执行命令安装Sass，CSS的module：pnpm i scss -D
建立Vite + React的框架

在工程目录下新建组件index.jsx:

export function Header(){
    return <div className={styles.header}>Header</div>
}

并新建sass文件：index.module.scss：
```
.header {
    color:red
}
```
使用CSS Modules 模块化方案，防止className 命名冲突
除了常见的图片格式外，Vite也内置了对于JSON、Worker、WASM资源的加载支持。
生产环境 Tree Shaking

优化原理：

1、基于ESM的import/export语句依赖关系，与运行时状态无关

2、在构建阶段将未使用到的代码进行删除
进行生产环境打包，执行：pnpm run build，然后可查看Vite编译后的代码文件。
CommonJS 格式不能做到Tree Shaking。
Esbuild作为默认压缩工具，替代传统的Terser、Uglify.js等压缩工具。

1.4 Vite进阶路线

推荐学习顺序（esbuild、rollup.js）：

了解基本使用，动手尝试各项常用配置
然后学习其插件开发

JS编译工具（Babel）出现的原因：
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法

总结

Vite是一个轻量级的构建工具，旨在提供快速的开发体验。它利用了ES模块的特性，通过直接在浏览器中运行原始的开发代码，而不是像传统的构建工具（如Webpack）那样先将代码打包合并。这种方式可以实现快速的冷启动和热模块替换，从而提高开发效率。