Vite 知识体系

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

vite是什么

Vite 是一种 新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

Vite的官方定位是下一代前端开发和构建工具

• 传统构建方式：每个项目文件都进行打包编译构建。
• Vite 少了每个文件都进行打包编译构建的这个环节（按需打包编译构建

Vite 具有以下特点

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

Vite对常见文件的支持

• CSS：直接在主文件中导入 CSS 即可，不需要任何其他的配置信息
• less：使用命令 npm install less -D 直接导入 less 文件，并且安装 less。如果不安装 less 的话，则会报错
• postcss：使用命令 npm install postcss -D 安装 postcss，再使用命令 npm install postcss-preset-env -D 安装相关的插件，并且在 postcss.config.js 中配置相应的插件即可
• Typescript：Vite 完全可以支持 Typescript,不需要任何配置，只需要直接引入 Typescript 即可
• Vue：使用命令 npm install @vitejs/plugin-vue -D 安装相关的 Vue，然后再新增一个 vite.config.js ，再在其中配置信息

Vite的安装和使用

• 安装：

• 通过vite来启动项目：

vite整体架构

预打包

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

实现原理:

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

与其他传统构建工具比较（Webpack、Rollup、Vue-cli）

• Webpack 更全面
• Rollup 更专一
• Vite 更好用