Vite认识

官方文档：vitejs.dev/guide/

Vite是什么？

Vite（法语单词，“快” 的意思）是一种新型的前端构建工具

最初是配合 Vue3.0 一起使用的，后来适配了各种前端项目，以下是官方支持的模板

特点：

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译

基于浏览器 native 的 ES module 来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可，生产环境用rollup

Vite解决了什么问题？

1. ES Modules 模块系统本身的环境兼容问题
2. 零散的模块文件导致的频繁网络请求发送
3. 模块化发散的问题

webpack 是一个现代 JavaScript 应用程序的静态模块打包器

• vue-cli和create-react-app使用 webpack 进行打包，开发时可以启动本地开发服务器，实时预览。因为需要对整个项目文件进行打包，开发服务器启动缓慢

• 而对于开发时文件修改后的热更新 HMR 也存在同样的问题

• Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次

Vite主要解决以上两个问题

Vite只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载

对于热更新问题，vite 采用立即编译当前修改文件的办法。同时 vite 还会使用缓存机制( http 缓存 => vite 内置缓存 )，加载更新后的文件内容

Vite怎么使用？

yarn create vite my-vite-app --template react-ts
yarn dev

http://localhost:3000

内部原理简要概述

1. 在 koa 中间件中获取请求 body；
2. 通过 es-module-lexer 解析资源 ast 并拿到 import 内容；
3. 判断 import 的资源是否是 npm 模块；
4. 返回处理后的资源路径："react" => "/@modules/ react"

常用插件

• 用户注入的 plugins —— 自定义 plugin
• hmrPlugin —— 处理 hmr
• htmlRewritePlugin —— 重写 html 内的 script 内容
• moduleRewritePlugin —— 重写模块中的 import 导入
• moduleResolvePlugin ——获取模块内容
• vuePlugin —— 处理 vue 单文件组件
• esbuildPlugin —— 使用 esbuild 处理资源
• assetPathPlugin —— 处理静态资源
• serveStaticPlugin —— 托管静态资源
• cssPlugin —— 处理 css/less/sass 等引用

其他

 Node版本需要大于等于12的