前言

  • 认识 Vite
  • 浏览器原生支持模块化
  • Vite 的安装和使用
  • Vite 对 css 的支持
  • Vite 对 TypeScript 的支持
  • Vite 对 vue 的支持
  • Vite 打包项目
  • ESBuild 解析
  • ESBuild 的构建速度
  • Vite 脚手架工具

认识 Vite

Webpack 是目前整个前端使用最多的构建工具,但是除了 webpack 之后也有其他的一些构建工具:

比如 rollup、parcel、gulp、vite 等等

什么是 vite 呢? 官方的定位:下一代前端开发与构建工具;

如何定义下一代开发和构建工具呢?

  • 我们知道在实际开发中,我们编写的代码往往是不能被浏览器直接识别的,比如 ES6、TypeScript、Vue 文件等等;
  • 所以我们必须通过构建工具来对代码进行转换、编译,类似的工具有 webpack、rollup、parcel;
  • 但是随着项目越来越大,需要处理的 JavaScript 呈指数级增长,模块越来越多;
  • 构建工具需要很长的时间才能开启服务器,HMR 也需要几秒钟才能在浏览器反应出来;
  • 所以也有这样的说法:天下苦 webpack 久矣;
  • Vite (法语意为 “快速的”,发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。

浏览器原生支持模块化

image-20210930110600622

但是如果我们不借助于其他工具,直接使用 ES Module 来开发有什么问题呢?

  • 首先,我们会发现在使用 loadash 时,加载了上百个模块的 js 代码,对于浏览器发送请求是巨大的消耗;
  • 其次,我们的代码中如果有 TypeScript、less、vue 等代码时,浏览器并不能直接识别;

事实上,vite 就帮助我们解决了上面的所有问题。

Vite 的安装和使用

注意:Vite 本身也是依赖 Node 的,所以也需要安装好 Node 环境

并且 Vite 要求 Node 版本是大于 12 版本的;

首先,我们安装一下 vite 工具:

1
2
npm install vite –g # 全局安装
npm install vite –D # 局部安装

通过 vite 来启动项目:

1
npx vite

Vite 对 css 的支持

vite 可以直接支持 css 的处理

直接导入 css 即可;

vite 可以直接支持 css 预处理器,比如 less

  • 直接导入 less;

  • 之后安装 less 编译器;

    1
    npm install less -D

vite 直接支持 postcss 的转换:

只需要安装 postcss,并且配置 postcss.config.js 的配置文件即可;

1
npm install postcss postcss-preset-env -D

image-20210930110811392

Vite 对 TypeScript 的支持

vite 对 TypeScript 是原生支持的,它会直接使用 ESBuild 来完成编译:

  • 只需要直接导入即可;

如果我们查看浏览器中的请求,会发现请求的依然是 ts 的代码:

  • 这是因为 vite 中的服务器 Connect 会对我们的请求进行转发;
  • 获取 ts 编译后的代码,给浏览器返回,浏览器可以直接进行解析;

注意:在 vite2 中,已经不再使用Koa了,而是使用Connect来搭建的服务器

image-20210930110908615

Vite 对 vue 的支持

vite 对 vue 提供第一优先级支持:

Vue 3 单文件组件支持:@vitejs/plugin-vue

Vue 3 JSX 支持:@vitejs/plugin-vue-jsx

Vue 2 支持:underfin/vite-plugin-vue2

安装支持 vue 的插件:

1
npm install @vitejs/plugin-vue -D

在 vite.config.js 中配置插件:

image-20210930111138679

Vite 打包项目

我们可以直接通过 vite build 来完成对当前项目的打包工具:

1
npx vite build

image-20210930111214388

我们可以通过 preview 的方式,开启一个本地服务来预览打包后的效果:

1
npx vite preview

ESBuild 解析

ESBuild 的特点:

  • 超快的构建速度,并且不需要缓存;
  • 支持 ES6 和 CommonJS 的模块化;
  • 支持 ES6 的 Tree Shaking;
  • 支持 Go、JavaScript 的 API;
  • 支持 TypeScript、JSX 等语法编译;
  • 支持 SourceMap;
  • 支持代码压缩;
  • 支持扩展其他插件;

ESBuild 的构建速度

ESBuild 的构建速度和其他构建工具速度对比:

image-20210930111420140

ESBuild 为什么这么快呢?

  • 使用 Go 语言编写的,可以直接转换成机器代码,而无需经过字节码;
  • ESBuild 可以充分利用 CPU 的多内核,尽可能让它们饱和运行;
  • ESBuild 的所有内容都是从零开始编写的,而不是使用第三方,所以从一开始就可以考虑各种性能问题;
  • 等等….

Vite 脚手架工具

在开发中,我们不可能所有的项目都使用 vite 从零去搭建,比如一个 react 项目、Vue 项目;

这个时候 vite 还给我们提供了对应的脚手架工具;

所以 Vite 实际上是有两个工具的:

  • vite:相当于是一个构件工具,类似于 webpack、rollup;
  • @vitejs/create-app:类似 vue-cli、create-react-app;

如何使用脚手架工具呢?

1
npm init @vitejs/app

上面的做法相当于省略了安装脚手架的过程:

1
2
npm install @vitejs/create-app -g
create-app