开发工具Vite

lenjstlp
144 阅读6分钟

一、认识Vite核心理念

认识vite

  • 什么是vite？
    • 官方：下一代前端开发与构建工具
  • 如何定义下一代开发和构建工具？
    • 在实际开发中，我们编写的代码并不被浏览器直接识别，如ES6、TypeScript、Vue文件等
    • 所以必须通过构建工具来对代码进行转换、编译、类似的工具有webpack、rollup、parcel
    • 随着项目越来越大，需要处理的JavaScript呈指数级别增长，模块越来越多
    • 构建工具需要很长时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来
  • Vite(法语：快速的)是一种新型前端构建工具，能够显著提升前端开发体验

二、浏览器模块化支持

Vite的构造

  • 两部分组成
    • 一个开发服务器(connect/koa早期)，基于ES模块提供了丰富的内建功能，HMR的速度非常快速
    • 一套构建指令，使用rollup打开代码，并且是预配置的，可以输出成生产环境的优化过的静态资源
  • 浏览器支持ES模块之前，JavaScript并没有提供原生机制让开发者以模块化的方式进行开发
    • 这也是“打包”概念熟悉的原因：使用工具抓取、处理源码模块串联成可以在浏览器中运行的文件
    • 注入webpack、Rollup、Parcel等工具的变迁，极大的改善了前端开发者的开发体验
    • 然后，当项目越来越大的时候，需要处理的JavaScript代码量也呈指数级增长，包含数千个模块的大型项目相当普遍
    • 基于JavaScript开发的工具就会开始遇到性能瓶颈：通常需要很长时间(几分钟)才能启动开发服务器，即使使用模块热替换(HMR)，文件修改后效果也需要几秒钟才能在浏览器中反映
  • Vite旨在利用生态系统中的新进展解决上述问题
    • 浏览器开始原生支持ES模块，且越来越多的JavaScript工具使用编译型语言编写
    • the rise of JavaScript tools written in compile-to-native languages

Snipaste_2023-07-30_16-18-41.png

浏览器原生支持模块化

  • 若不借助其他工具，直接使用 ES Module 来开发的问题
    • 使用lodash时，会加载成百个模块的js代码，对浏览器请求是巨大的消耗
    • ts、less、vue等代码浏览器不识别
  • Vite可以帮我们解决上面的问题

浏览器原生加载的缺点

  • 1.必须明确写上后缀名
  • 2.若一个模块，加载了很多其他的js文件，那么这些js文件都需要被依次加载
  • 3.浏览器需要将所有的js文件请求下来，发送很多的http请求(效率也是非常的低)
  • 4.代码中有typescript/jsx/vue代码，那么浏览器不识别
  • 得放到服务器中访问，直接用html访问会跨域

三、Vite基础打包能力

Vite的安装

  • 安装vite工具
    • npm install vite -g
    • npm install vite -D
  • 通过vite来启动项目
    • npx vite

Vite对css的支持

  • vite可以直接支持css的处理
    • 直接导入css即可
  • vite可以直接支持css预处理器，如less
    • 直接导入less
    • 之后安装less编译器
      • npm install less -D
  • vite直接支持postcss的转换
    • 需要安装postcss，并且配置postcss.config.js的配置文件即可
      • npm install postcss postcss-preset-env -D

Vite对TypeScript的支持

vite底层通过connect开启服务器，把请求做了个转发；浏览器请求ts，服务器读取到浏览器需要的ts文件，通过ESBuild直接转成js代码，再转发给浏览器；虽然请求的是ts文件，但是内容实际上是js代码

  • vite对ts是原生支持的，它会直接使用ESBuild来完成编译
    • 只需要直接导入即可
  • 如果查看浏览器中的请求，会发现请求的依然是ts的文件
    • vite中的服务器Connect会对我们的请求进行转发
    • 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析
  • 注意：在vite2中，已经不再使用Koa了，用的是Connect来搭建的服务器
    • 由于大多数逻辑应该通过插件钩子而不是中间价来完成，因此对中间件的需求大大减少。内部服务器应用现在是一个很好的旧版的connect实例，而不是Koa

四、Vite打包Vue、React

Vite对vue的支持

  • vite对vue提供第一优先级支持
    • Vue3 单文件组件支持：@vitejs/plugin-vue
    • Vue3 JSX支持：@vitejs/plugin-vue-jsx
    • Vue2 支持：underfin/vite-plugin-vue2
  • 安装支持vue的插件
    • npm install @vitejs/plugin-vue -D
  • 在vite.config.js中配置插件
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue()
    ],
})

Vite对react的支持

  • .jsx 和 .tsx 文件同样开箱即用，它们也通过 ESBuild 来完成的编译
    • npm install react react-dom
    • 我们只需要直接编写react代码即可
    • 注意：index.html加载main.js时，需要将main.js的后缀修改为main.jsx作为后缀名

Vite打包项目

  • 直接通过vite build来完成对当前项目的打包工具
    • npx vite build
  • 通过 preview 的方式，开启一个本地服务来预览打包后的效果
    • npx vite preview

五、Vite脚手架工具使用

  • 在开发中，不可能所有的项目都使用vite从零去搭建，比如一个react项目，Vue项目
    • vite提供了对应的脚手架工具
  • Vite实际上是有两个工具的
    • vite：相当于是一个构建工具，类似于webpack、rollup
    • @vitejs/create-app：类似vue-cli、create-react-app
  • 使用脚手架
    • npm create vite
    • yarn create vite
    • pnpm create vite

六、ESBuild工具的解析

ESBuild解析

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

ESBuild的构建速度

  • ESBuild的构建速度远远超过其他构建工具速度
  • ESBuild为什么这么快？
    • 使用 go 语言编写，可以直接转换成机器代码，无需经过字节码
    • ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行(go)
    • ESBuild的所有内容都是从零开始编写的，不是基于第三方，所以一开始就可以考虑各种性能问题
avatar
文章
阅读
粉丝