Vite 知识体系 | 青训营笔记

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

1、什么是Vite

定位: 新一代前端构建工具

两大组成部分:

1、No一bundle开发服务．源文件无需打包

2、生产环境基于 Rollup 的 Bundler

核心特征：

1、高性能, dev启动速度和热更新速度非常快!

2、简单易用，开发者体验好

基于原生ESM的开发服务优势

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

基于Esbuild的编译性能优化

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

1.打包器Bundler

2.编译器Transformer

3.压缩器Minifier

性能极高，在 Vite 中被深度使用

2、Vite使用

1、提前安装pnpm

 npm i -g pnpm

2、初始化命令

 pnpm create vite

3、安装依赖

 pnpm install

4、启动项目

npm run dev

5、初始化项目

生产环境Tree Shaking

优化原理:

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

2.在构建阶段将未使用到的代码进行删除

3.Tree Shaking在Vite中无需配置,默认开启!

3、整体架构

预打包

为什么要进行预打包：

1.避免node_modules过多的文件请求

2.将CommonJS格式转换为ESM格式

实现原理:

1.服务启动前扫描代码中用到的依赖

2.用Esbuild对依赖代码进行预打包

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

4、Vite插件

开发阶段

插件示例

1、开发Vite插件

const fileRegex = /\.(my-file-ext)$ /

export default function myPlugin (){
  return {
    name: 'transform-file',
    transform (src, id){
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null //如果可行将提供source map
        }
      }
    }
  }
}

2、配置文件引入插件

// vite.config.js
import plugin from './myPlugin'

export default defineConfig ({
  plugins:[plugin()]
})