Vite知识体系简述

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

效果：页面Header文字表现为红色

3.3、使用静态资源

用法：比如图片直接引入在需要的地方加上就即可

3.4、使用`HMR`

无需额外配置自动开启

3.5、生产环境 Tree Shaking

Tree Shaking 在Vite中无需配置，自动开启

优化原理

基于ESN的import/export 语句依赖关系，与运行时状态无关
在构架阶段将为使用道德代码进行删除

理解：在打包时项目中引用单位使用的部分不会进行打包处理

打包
```
pnpm run build
```

4、Vite整体架构

关键技术：依赖预打包

为什们要进行预打包？

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

实现原理：

服务器启动前扫描代码中用到的依赖
用Esbuild对依赖代码进行滚预打包

改写import语句，指定依赖为预构建产物路径

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

关键技术：单文件编译

用Esbuild编译TS/JSX

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

局限性

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

关键技术：代码压缩

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

关键技术：插件机制

开发阶段：使用Rollup插件机制

生产环境： 直接使用Rollup

插件兼容性查阅传送

5、Vite进阶路线

深入双引擎

学习顺序

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

为什么需要插件机制？

抽离核心逻辑
易于拓展

Vite插件开发

服务启动阶段
1. config
2. configResolved
3. options
4. configureServer
5. buildStart
请求相应阶段
- transformIndexHtml
- resolveId => load => transform
热更新阶段： handleHotUpdate
服务关闭阶段
1. buildEnd
2. closeBundle

参考资料

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

代码分割（拆包）

参考资料

`JS`编译工具（`Bable`）

出现原因：

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

参考资料：

语法安全降级

如何避免

上层解决方案：@vite.js/plugin-legacy
底层解决
- 借助Bable进行语法自动降级
- 提前注入Polyfill实现，如core-js,regenerator-runtime

参考资料

服务器渲染

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

参考资料

Vite-SSR

深入了解底层标准

CJS规范
ESM规范
HTTP2.0特性

参考资料

Flying____fish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vite知识体系简述

新一代前端构架工具No-bundle开发服务，源文件无需打包生产环境基于Rollup的Bundler高性能，dev启动速度和热更新速度非常快简单医易用,开发者体验好传统构架工具遇到的问题缓慢的启动=>项目编译等待成本告缓慢的热更新=>修改代码后不能实时更新瓶颈bundle带来的性能开销JS语言的性能瓶颈。.........
复制链接

扫一扫