Vite —— 一种新的、更快地 web 开发工具。

vite 是什么

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具备以下特点：

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

Vite介绍

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，齐全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件反对，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则能够把同一份代码用 rollup 打包。

  • 英文文档
  • 中文文档
  • GitHub

<!--more-->

搭建第一个 Vite 我的项目

兼容性留神

Vite 须要 Node.js 版本 >= 12.0.0。

应用 NPM:

npm init @vitejs/app

应用 Yarn:

yarn create @vitejs/app

通过如下命令搭建

npm init vite-app <project-name>cd <project-name>npm installnpm run dev

搭建后的我的项目目录构造如下：

因为 Vite 是一个基于原生 ESM 的开发服务器，所以能够看出是秒启动的。

初始化搭建的demo也比较简单

看下package.json里的代码：

{  "name": "vite-app",  "version": "0.0.0",  "scripts": {    "dev": "vite",    "build": "vite build"  },  "dependencies": {    "vue": "^3.0.4"  },  "devDependencies": {    "vite": "^1.0.0-rc.13",    "@vue/compiler-sfc": "^3.0.4"  }}

能够看出vite 是和 vue 3 搭配应用的。

vue 3 无论性能、包大小还有 ts 加持方面，vue 3 都远优于 vue 2的。

而build的过程，是利用 Rollup 进行构建的。

原文链接：https://jue.leheavengame.com/...