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

概要介绍

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

两大组成部分:

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

核心特征：

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

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

看下官方的图解：

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

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

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

内置的 web 构建能力

Vite 开箱即用的功能等价于

webpack

webpack-dev-server

css-loader

style-loader

less-loader

sass-loader

postcss-loader

file-loader

MiniCssExtractPlugin

HTMLWebpackPlugin

上手使用

vue3+vite

 1. 创建一个目录 tutorial
 打开cmd
 执行cd tutorial进入文件夹
 
 2. npm init vue@3
 tutorial\tutorial
 cd tutorial
 
 3. npm install
 
 4. npm install -D less 
 
 5. npm run dev

生产环境 Tree Sharking

优化原理：

基于 ESM 的 import/export 语句依赖关系，与运行状态无关。
在构建阶段未使用到的代码进行删除

Tree Sharking在vite中无需配置，默认开启

整体架构

关键技术: 依赖预打包

为什么要进行预打包? 1、避免 node_modules 过多的文件请求 2、将CommonJS格式转换为ESM格式

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

关键技术: 单文件编译

用Esbuild编译TS/JSX

优势:编译速度提升 10-100 倍

局限性: 不支持类型检查不支持语法降级到 ES5

关键技术：代码压缩

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

关键技术：插件机制

rollup官网

开发阶段 -> 模拟 Rollup插件机制生产环境 -> 直接使用Rollup

插件兼容性具体可查阅 vite-rollup-plugins.patak.dev/

进阶路线

深入双引擎

esbuild、rollup.js

推荐学习顺序:

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

vite 插件开发

文档

语法安全降级

@vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持.

服务端渲染（SSR）

:vitejs.cn/guide/ssr.h…

总结

本文在概要介绍、上手、架构、进阶路线方面简单介绍了Vite这个构建工具，更多的问题和便捷需要自己在实战项目中逐步去总结。

Vite 初步认识 | 青训营笔记