Vite概述

博主本次性通过vite构建vue3.0项目，指在体验vite，看看vite到底有什么神奇

vite是什么

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。 —-尤雨溪

特点

• vite冷服务启动， 一个基于浏览器原生 ES imports 的开发服务器利用浏览器去解析 imports
• 搞定了热更新，而且热更新的速度不会随着模块增多而变慢
• 按需编译，不会刷新所有的DOM

类似于cli的2代产品

简单总结

大白话就是，vite秒启动，主要是它并不是马上编译，当开发人员打开浏览器，打入url加载的时候，当前页面所需的资源就去请求，然后vite服务就拦截http请求，再到后台服务处理编译等等，最后再返回处理好的资源。总的来说，vite只做你当前在浏览器所看到的。

焦点关注

• 生产环境下打包是通过Rollup来完成的
• vite原生支持TS，JSON，CSS

如何上手

npm init @vitejs/app

测试-vue框架

用vite搭建的vue3.0 项目，我们可以很清晰的看到可以直接通过浏览器自身带有的modules的来进行加载(需要cli更新到最新版)

$ npm init vite-app <project-name>/yarn create vite-app app_name
$ cd <project-name>
$ npm install
$ npm run dev

文件结构解析

项目的入口为 index.html，html 文件中直接使用了浏览器原生的 ESM（type="module"） 能力。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

所有的 js 文件经过 vite 处理后，其 import 的模块路径都会被修改，在前面加上 /@modules/。当浏览器请求 import 模块的时候，vite 会在 node_modules 中找到对应的文件进行返回。

为什么有竞争力

早期 Webpack 刚出来的时候，是为了解决低版本浏览器不支持 ESM 模块化的问题，将各个分散的 JavaScript 模块合并成一个文件，同时将多个 JavaScrpt 脚本文件合并成一个文件，减少 HTTP 请求的数量，有助于提升页面首次访问的速度。后期 Webpack 乘胜追击，引入了 Loader、Plugin 机制，提供了各种构建相关的能力（babel转义、css合并、代码压缩），取代了同期的 Browserify、Gulp。

如今，HTTP/2 的盛行，HTTP/3 也即将发行，再加上 5G 网络的商用，减少 HTTP 请求数量起到的作用已经微乎其微，而且新版的浏览器基本已经支持了 ESM（<script module>）。

测试-react框架

从文档中得出，vite不仅仅支持vue，react也支持
那么接下来测试下react

mkdir react-vite
react-vite 
 npm init vite-app --template react

同样ok

关于别名

原本：

alias:{
      '@': resolve(__dirname, "src"),
      'comps': resolve(__dirname, "src/components"),
      'apis': resolve(__dirname, "src/api"),
      'views': resolve(__dirname, "src/views"),
    }

更新调整为