Vite学习

1. Vite简介(基于2.0.5版本)

一种新的、更快地 web 开发工具，由 vue 作者尤雨溪开发，具有快速冷启动、即时的模块热更新、真正的按需编译，现在Star有21.4k：https://github.com/vitejs/vite

Vite，基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢，生产环境用rollup，适用现在所有前端开发。

 

Chrome >=61
Firefox >=60
Safari >=11
Edge >=16

默认情况下 Vite 只处理语法转译，并不默认包含任何 polyfill，

2. Vite基本原理

当声明一个 script 标签类型为 module 时，如

//http://localhost:3000/src/main.js请求main.js文件：
<script type="module" src="/src/main.js"></script>

浏览器就会向服务器发起一个GET请求

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app=createApp(App)

app.use(router)
app.mount('#app')

3. Vite项目搭建

//Vite需要Node.js版本> = 12.0.0。
$ npm init @vitejs/app

然后可以选择预设的模版包括

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts

你也可以在生成项目的时候直接指定项目名称和要使用的模版，例如我要搭建一个Vite+React+Ts的项目，可以运行：

npm init @vitejs/app my-react-app -- --template react-ts

生成的项目目录

|____node_modules //模块
|____src // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json

Vite 将index.html视为源代码和模块图谱的一部分，在开发期间 Vite 是一个服务器，而index.html是该应用的入口点，支持多个.html的多页面应用模式

4. 更进一步

4.1 Vite与webpack对比

	webpack	Vite
是否打包	将应用各个模块集合在一起形成 bundle，为了在浏览器里加载各模块，使用map存放模块 id 和路径，使用__webpack_require__方法获取模块导出	利用浏览器原生支持模块化导入，省略了对模块的组装，不需要生成 bundle，开发环境对源码无需打包
打包工具	使用node，常采用以下方式优化 tree shaking happypack(多线程打包) scope hoisting	分为依赖和源码两类，开发环境依赖用Go语言开发的Esbuild，比node快10-100倍，源码以原生 ESM 方式，生产环境用Rollup,因为Esbuild在代码分割和 CSS 处理方面还在开发中
HMR通信	开启webpack --watch选项，在webpack每次编译完更新文件，触发钩子，向sockjs发送新的message，使用websocket	使用Node提供的fs.watch fs.watchFile 来监听文件的变化(chokidar)，使用websocket
HMR效率	许多资源构成一个或者多个 bundle，遇到子模块更新，需要把该模块的相关依赖模块全部编译打包一次，	让浏览器重新请求该模块即可，真正做到按需请求，HMR 是在原生 ESM 上执行的，利用 HTTP 头来加速整个页面的重新加载，依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，借助原生浏览器性能
现状	社区庞大，稳定，插件丰富，用户群体基数大	社区刚起步，发展迅速，更新频率非常快，国内前端红人尤雨溪加持

4.2 Esbuild打包效率

4.3 工作流程

请求文件(.vue)

<template>
    <div>
        <h1>我是page2</h1>
    </div>
</template>

<script>
export default {
name: "page2"
}
</script>

<style scoped>
h1{
font-weight: bold;
color: green;
}
</style>

编译后文件