Vite ｜ 青训营笔记

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

本笔记不适合0基础同学阅读，笔者希望你会webpack和vite的入门知识。

Vite 官网

   

• 📚： 官方文档，中文文档
• 🔨： 常用设置文档
• 🧰： API 文档
• ⛄：插件和其生态 - awesome-vite

Vite 和 webpack 对比

webpack 和 Vite 构建模式截然不同，在浏览器没有支持模块化的时候，期望将所有源代码编译进一个 js 文件中，然后提供给浏览器使用。

所以在开发中运行启动命令的时候，webpack 总是需要从入口文件索引到整个项目的文件，下一步可能会采用代码拆分编译成一个或者多个单独的 JS 文件，这一步需要一次生成所有路由下的编译后文件，伴随着服务启动的时间随着项目复杂度指数增加。

那么 Vite 是如何解决问题的呢？Vite 会在本地帮你启动一个服务器，当浏览器读取到整个 html 文件之后，会执行到 import 的时候才去向服务端发送对应模块的请求，Vite 内部进行模板解析，代码编译等解析成浏览器可以执行的 JS 文件返回到浏览器端，这里就是真正的按需加载，并且不会因为模块增多而变慢。

Vite 带来的收益是什么

1. 开发环境启服务器速度飞快

   构建工具为 Webpack

   服务器启动速度，启动时间随着模块数增多而变慢

   

   构建工具为 Vite

   服务器启动速度，相较于前者快了将近十几倍，而且测试项目的模块数目并不多，只有几个模块。如果是一个较大的工程项目，包含几百个几千个模块，Vite 启动服务器的速度将会是 webpack的几千倍

   

2. 几乎实时的模块热更新

   webpack 热更新也是需要重新编译一遍所有模块，然后启动服务器的，换句话来说 webpack 的热更新速度和初次编译启动时间相差不了多少，这样会给开发者带来一些负面的体验感，比如你在改动一个组件样式之后，可能需要等待很长一段时间页面才会重新渲染。

Vite 出现了，Vite的热更新同样也运用到了 esbuild 的能力，可以准确的更新页面而无需重新加载页面或者删除应用程序状态。

3. 所需文件按需编译，避免编译用不到的文件

4. 开箱即用，便面各种 Loader 和 Plugin 的配置

   • Typescript - 内置支持
   • less/sass/postcss - 内置支持

Vite 整体架构

依赖预打包

单文件编译

代码压缩

插件机制

本篇都是些很基础的东西，详细学习请移步页顶官网。