Vite-初识

用户971884103405
268 阅读5分钟

Vite 构建工具

Vite 出现已经很久了，之前虽然用过，但是没有特别的专门了解过，最近看了看相关的资料，在这里总结一下。

Vite 零配置

Vite 零配置的原因就是它可以识别js、ts、css、图片等，所以无需配置。 但是Webpack 如果想要这些还是需要一些基本的 Loader 配置识别他们进行编译的。

在一些项目中想要精准的控制一些优化或者其他配置时，还是需要一些配置选项的,这个在后续的内容中会提到

Vite 开发模式

Vite 快的原因： Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

对于依赖的处理使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

对于源码的处理就是在浏览器请求前在进行处理，并且是以 原生 ESM 方式提供源码。

所以快的原因是综合的，首先 Vite 没有对全部模块进行编译，而是分批编译，只有使用到的模块才进行编译，而且有一部分工作都交给了浏览器去做。

image.png

比如这张图，请求的是 .vue 文件，但 Vite 服务器 控制了Content-Type:application/javascript 浏览器就会以 js 的方式执行 所以又加快了一些速度。

image.png 再看这张图 同样的请求，第二次请求状态是 304 直接从缓存中获取，速度也提升了。

原文， 大家可以看一下

为什么用 esbuild？ 因为依赖在开发时大多为不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS），所以 通过 esbuild 统一处理成 esm。

源码为什么在使用时才编译？因为源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）

这块讲了，就讲一下代理服务，虽然执行 vite 时 无需显示的配置开发服务器，但是在浏览器运行时，经常会遇到跨域问题，所以需要配置一个简单的代理

这边在根目录下创建一个 vite.config.js 文件， vite 在启动时，会自动识别此文件并合并配置 （也支持其他 JS 和 TS 扩展名）

// vite.config.js
import { defineConfig } from 'vite' // 从 vite 中引入 defineConfig 用于返回一个对象和有参数类型提示
export default defineConfig({
    server:{
        proxy:{ // 这边的代理和 webpack 的配置差不多, 
            '/api':{ // 可以配置多个代理，只需要在请求时修改 key 就可以代理到不同的服务器，方便对接多个服务器
                target: 'www.api.com',
                changOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },
            '/dev':{ 
                target: 'www.dev.com',
                changOrigin: true,
                rewrite: (path) => path.replace(/^\/dev/, '')
            },
        }
    }
})

当然还有一些其他配置在这里就不多赘述了，有兴趣的可以到官网上一个一个尝试一下。

Vite 构建

在 Vite 构建时，文档中有提到，是使用的 rollup 进行构建的，而且在构建生成环境时已经开启了一些优化，比如 异步加载分割代码、tree-shaking、chunk 分割、CSS 代码分割

但是第三方库vendor或者特殊的拆分需求需要借助rollup的manualChunks,此配置是在 build.rollupOptions 中进行配置，因为构建是通过 rollup 进行构建的 所以此配置也就是配置 rollup。

// vite.config.js
import { defineConfig } from 'vite' // 从 vite 中引入 defineConfig 用于返回一个对象和有参数类型提示
export default defineConfig({
  build: { // 用于构建时的配置
    outDir: 'dist', // 输出的目录名称
    emptyOutDir: true, // 是否在构建时清空目标目录
    rollupOptions: { // rollup 的配置
      output: {
          // 此配置就是用于分割代码 
          manualChunksL{
              vendor: ['vue','vue-router'] // 方式1 明确哪个第三方库进行分割
          },
        /**
        * @params {string} id 表示文件名称
        */ 
        manualChunks(id) { // 方式2 可以通过条件语句进行判断
          if (id.includes('node_modules')) {
              // 这边就判断 文件名称包含 node_modules 就对其进行分割
            return id.toString().split('/node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})

Vite Plugin

对于一些框架来说 比如 Vue React 还需要配置对应的 Plugins 才可以正确运行

Vite 为 Vue 提供第一优先级支持：

.jsx 和 .tsx 文件同样开箱即用。JSX 的转译同样是通过 esbuild。

Vue 用户应使用官方提供的 @vitejs/plugin-vue-jsx 插件，它提供了 Vue 3 特性的支持，包括 HMR，全局组件解析，指令和插槽。

// vite.config.js
import { defineConfig } from 'vite' // 从 vite 中引入 defineConfig 用于返回一个对象和有参数类型提示
import vue from '@vitejs/plugin-vue' // 引入vue对应的plugin
import vueJsx from '@vitejs/plugin-vue-jsx' // 引入vue中jsx对应的plugin
export default defineConfig({
  plugins: [
      vue(),
      vueJsx(),
  ]
})

这一部分我就直接贴文档说明了，也很好理解

Vite resolve

此选项可以配置 alias(别名) extensions(扩展后缀名) 等 提升开发时的效率

示例代码

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite' // 从 vite 中引入 defineConfig 用于返回一个对象和有参数类型提示
export default defineConfig({
   resolve: {
    extensions: ['js','jsx','json','vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

TS 仅执行转义

Vite 仅执行 .ts 文件的转译工作，并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。

小小结

这里就小小了解一下 Vite 的基本功能把，其他的配置项就不多介绍了，主要先了解一下，之后再深入了解其原理。

avatar
文章
阅读
粉丝