Vite 学习（一） - 介绍

简介

vite 是一个基于浏览器原生 ES-Module 的前端构建工具。官网描述为 下一代前端开发与构建工具。

下一代？

有下一代的概念，我们就先了解下什么是上一代工具。

• es6 出现之前我们的代码规范都是使用的社区规范，例如 node 使用的 commonjs 规范，还有服务客户端的 AMD、CMD 规范。
• es6 出现后，代码模块化有了语言规范，即 ES-Module 规范 所以既然有了官方的规范标准，我们就可以考虑抛弃社区规范，统一使用官方准则。

特点

• 快速的冷启动（使用了 esbuild 编译）
• 即时的模块热更新
• 真正的按需编译（利用原生能力，不能打包重新构建）
• 社区成本低（兼容 rollup 插件）

原理：利用 ES6 的 import 会发送请求去加载文件的特性，服务端对这些请求进行拦截，做一些预编译（浏览器不能识别 .vue 文件等），省去 webpack 冗长的打包时间。

Esbuild

类似 webpack 的前端构建工具，但是是使用 go 语言编写的，多线程并行执行

工具对比

前端目前常用的构建工具 webpack，包括我们使用的常见脚手架也都是基于它的。接下来对这两个工具做个大概对比：

webpack vs vite

• webpack 可以实现开发、构建、打包；vite 只是应用于开发、构建、阶段，打包依赖于 rollup 工具。
• vite 原理
  • 声明 script 标签类型要为 module
  • 浏览器发起一个 get 请求找到该文件
  • 如果文件中还有 import 的包，会继续发起请求
  • vite 的功能就是拦截浏览器发起的请求，在服务端对文件进行处理，在返回给浏览器，整个过程没有打包编译，所以速度快很多
• vite 解析实现过程如下:
  • 开发服务器使用 http + connect 构建服务
  • 通过多种中间件处理请求资源；也会遍历 html 节点，将元素的 src 属性添加上 base 前缀，将内联脚本转换为网络请求
  • 会通过 es-module-lexer 这个库分析出所有 import 语句
  • vite 会在请求后添加 query 参数的方式，用来标识当前请求的处理逻辑
• webpack 打包过程
  • 识别入口文件
  • 通过逐层模块依赖进行识别（对 require、import 进行分析获取依赖）
  • 针对不同的文件类型使用 loader 处理
  • 转换、编译、输出最终代码
• webpack 打包原理
  • 逐级递归识别依赖，构建依赖图谱
  • 将代码转为 AST 语法树
  • 在 AST 阶段处理代码
  • 把 AST 构建的语法树转为浏览器可识别的代码，输出最后输出的文件可知，webpack 自己实现了 require 函数，进行文件依赖导入；赖加载的文件使用 jsonp 方式实现

webpack 缺点及 vite 改进

• webpack 冷启动慢，因为需要对所有文件都进行编译；vite 使用浏览器原生 ESM 能力，只在当前屏幕使用的文件才会处理，不用都编译。

• webpack 中使用 nodejs 编写的打包器构建；vite 使用 esbuild（go） 构建依赖，比 javascript 编写的工具快
• webpack 编辑文件后将重新热替换文件（模块）本身，热更新效率随着项目体积增大变慢；vite 中，HMR 是在原生 ESM 上执行的，无论应用体积大小，都能更精准的更新模块本身。同时也利用了强缓存和协商缓存避免不需要的请求。
• webpack 已经更新到的第五代，loader 和 plugin 丰富，生态优于 vite。但是 vite 发展势头正猛，相信社区发展也只是时间问题
• vite 的打包目前还依赖于 rollup
• vite 针对 vue，react， svelte 都有提供基础模板

简单使用

1. 通过 vite 创建项目
2. npm init @vitejs/app （可能会提示你全局安装 @vitejs/create-app）

    vanilla  无模板原生模式
>   vue      vue3
    react 
    preact
    lit
    svelte

大家可以根据自己的选择去安装了

1. 项目结构 module 形式引入 js 文件
   

vite.config.js 配置文件，vue 默认是 setup 开发模式，如果想用 jsx 开发，需要单独安装插件

1. npm run dev

1. 想使用 jsx 开发import { defineComponent } from "vue"; export default defineComponent({ setup() { return () => { return <h3>我是jsx</h3> } } })修改 main.jsimport { createApp } from 'vue' import App from './App' ////////// createApp(App).mount('#app')
2. npm i @vitejs/plugin-vue-jsx -D
3. 新建 App.jsx 文件

创建 vue2 项目

我们用 vite 创建项目时知道，没有 vue2 模板的选项，那对于熟悉 vue2 技术栈的同学该怎么办呢？

我们重新创建项目选择 vanilla 模板，一个最简单的形式。

1. 创建 vite.config.jsimport { createVuePlugin } from 'vite-plugin-vue2' export default { plugins: [createVuePlugin()] }
2. 安装 vue2、npm i vue -S
3. 目录结构如下

1. 书写测试代码 编辑 main.js 文件import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }).$mount()编辑 App.vue 文件<template> <div> vue2 </div> </template>

使用社区 vue2 模板

打开 awesome-vite

缺点就是你需要 clone 它的项目，进行开发。

vite 的介绍和简单实用就到这里，下一篇学习下 vite 中使用静态资源，使用环境变量。