翼度科技»论坛 编程开发 JavaScript 查看内容

为什么用Vite框架?来看它的核心组件案例详解

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
Vite 是一个前端构建工具,它以其快速的开发服务器和生产优化的打包器而闻名前端界,今天的内容,必须得唠唠 Vite 的关键能力,以下是 Vite 的核心组件分析,以及使用案例:

  • 原理分析

    • Vite 利用了现代浏览器对 ESModule 语法的支持,在开发环境中不进行打包编译,而是通过启动本地 devServer 来提供服务,从而显著提高了启动速度 。
    • 在开发过程中,Vite 按需加载页面所需的模块,而不是一次性编译整个项目 。
    • Vite 使用 esbuild 进行依赖预构建,将多种模块化规范转换为 ESM,并减少网络请求 。
    • Vite 通过 HTTP 缓存和文件系统缓存优化性能,利用 es-module-lexer 和 magic-string 重写模块路径 。

  • 源码实现

    • Vite 的源码主要分为客户端和服务端两部分,客户端代码负责处理 WebSocket 消息,服务端代码处理代码构建和模块请求 。
    • Vite 的服务端使用 Koa 框架,通过拦截 HTTP 请求来提供模块服务 。

  • 使用技巧

    • 利用 Vite 的快速开发体验,可以快速启动项目并实时预览修改效果 。
    • 由于 Vite 支持原生 ESM,可以直接在浏览器中运行未打包的代码,简化了开发流程 。
    • Vite 的配置简单,通常只需要一个配置文件即可完成项目的构建和部署 。
    • Vite 支持多种前端框架和语言,可以灵活地选择技术栈 。

  • Vite 相对于 Webpack 的优势

    • Vite 提供了更快的冷启动和热模块替换 。
    • Vite 支持原生 ESM,无需额外的转译和打包步骤 。
    • Vite 实现了按需加载,降低了构建和加载的成本 。
    • Vite 提供了易配置和零配置选项,简化了项目设置 。

Vite 的设计哲学是尽可能利用现代浏览器的能力,减少不必要的打包操作,从而提高开发效率。在生产环境中,Vite 使用 Rollup 进行打包,确保了最终产物的优化和性能 。
Vite 的核心组件功能主要包括以下几个方面:

  • 开发服务器(Dev Server)

    • Vite 提供了一个快速的开发服务器,利用 HTTP/2 和 ES 模块(ESM)来提供服务,实现快速的模块加载和热更新。

  • 按需编译

    • Vite 在开发模式下按需编译请求的模块,而不是一次性编译整个项目,这大大提升了开发时的响应速度。

  • 依赖预构建

    • Vite 使用 esbuild 预先构建依赖,将 CommonJS、UMD 等模块化规范转换为 ESM,减少网络请求次数,提高性能。

  • 热模块替换(HMR)

    • Vite 实现了高效的热模块替换机制,当源代码发生变化时,只替换变更的部分,而不需要重新加载整个页面。

  • 缓存机制

    • Vite 利用 HTTP 缓存和文件系统缓存来提高性能,对于不经常变动的依赖使用强缓存,源码部分使用协商缓存。

  • 模块路径重写

    • Vite 使用 es-module-lexer 和 magic-string 来解析和重写模块路径,以适应浏览器的模块加载机制。

  • 构建优化

    • 在生产模式下,Vite 使用 Rollup 或其他构建工具来打包应用,生成优化后的静态资源。

  • 插件系统

    • Vite 支持插件扩展,允许开发者通过插件来自定义构建流程,例如添加对特定类型文件的支持。

下面 V 哥将一一介绍这些核心功能并结合案例讲解。
1. 开发服务器(Dev Server)

开发服务器(Dev Server)是 Vite 的核心组件之一,它在开发过程中提供了快速的模块加载和热更新功能。以下是开发服务器的一个简单案例和解析:
来看一个案例

假设我们有一个简单的 Vue 3 项目,我们希望使用 Vite 来启动开发服务器。以下是项目的目录结构和关键文件:
  1. /my-vue-app
  2. |-- node_modules
  3. |-- public
  4. |   |-- index.html
  5. |-- src
  6. |   |-- main.js
  7. |   |-- App.vue
  8. |-- vite.config.js
  9. |-- package.json
复制代码

  • index.html (public/index.html):
  1.    <!DOCTYPE html>
  2.    <html lang="en">
  3.    <head>
  4.      <meta charset="UTF-8">
  5.      <title>Vite Vue App</title>
  6.    </head>
  7.    <body>
  8.      
  9.      
  10.    </body>
  11.    </html>
复制代码

  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import App from './App.vue';
  3.    const app = createApp(App);
  4.    app.mount('#app');
复制代码

  • App.vue (src/App.vue):
  1.    <template>
  2.      
  3.        <h1>{{ message }}</h1>
  4.      
  5.    </template>
  6.    
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      // 配置选项...
  4.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0"
  7.      },
  8.      "devDependencies": {
  9.        "vite": "^2.0.0"
  10.      }
  11.    }
复制代码
启动开发服务器

在项目根目录下,运行以下命令来启动开发服务器:
  1. npm run dev
复制代码
这个命令会执行 package.json 中定义的 "dev" 脚本,使用 Vite 启动开发服务器。
具体解析一下


  • 服务启动

    • 当执行 npm run dev 时,Vite 会启动一个本地开发服务器。

  • 模块服务

    • 开发服务器会监听文件系统的变化,并为 index.html 中引用的 type="module" 脚本提供服务。

  • 按需加载

    • 当浏览器请求 /src/main.js 时,Vite 服务器会提供该文件的内容,并按需解析和加载依赖的模块(如 App.vue)。

  • 热更新(HMR)

    • 如果 App.vue 或其他依赖文件发生变化,Vite 会通过 WebSocket 推送更新到浏览器,实现热更新,而无需刷新页面。

  • 源码映射(Sourcemap)

    • Vite 可以生成 Sourcemap,使得在浏览器的开发者工具中可以直接调试原始源代码,而不是转换后的代码。

  • 开发与生产分离

    • 开发服务器专注于开发体验,而生产构建会使用 Rollup 或其他配置进行优化,确保生产环境的性能。

2. 按需编译

按需编译是 Vite 的一个核心特性,它允许开发者在开发过程中只编译那些被实际请求的模块,而不是整个项目。以下是使用 Vite 进行按需编译的案例和解析:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |-- public/
  4. |-- src/
  5. |   |-- main.js
  6. |   |-- App.vue
  7. |   |-- SomeComponent.vue
  8. |-- vite.config.js
  9. |-- package.json
复制代码
文件内容


  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import App from './App.vue';
  3.    const app = createApp(App);
  4.    app.mount('#app');
复制代码

  • App.vue (src/App.vue):
  1.    <template>
  2.      
  3.        <h1>Home Page</h1>
  4.        <button @click="loadComponent">Load Component</button>
  5.      
  6.    </template>
  7.    
复制代码

  • SomeComponent.vue (src/SomeComponent.vue):
  1.    <template>
  2.      
  3.        <h2>I'm a lazy-loaded component!</h2>
  4.      
  5.    </template>
  6.    
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      // 配置选项...
  4.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0"
  7.      },
  8.      "devDependencies": {
  9.        "vite": "^2.0.0"
  10.      }
  11.    }
复制代码
启动开发服务器

在项目根目录下,运行以下命令来启动开发服务器:
  1. npm run dev
复制代码
按需编译解析


  • 首次加载

    • 当你访问应用的主页时,只有 main.js 和 App.vue 会被加载和编译,因为它们是初始入口点。

  • 按需加载组件

    • 当用户点击按钮触发 loadComponent 方法时,SomeComponent.vue 将被按需加载。由于 Vite 支持 ES 模块,这个组件将通过动态 import() 语法异步加载。

  • 编译请求的模块

    • 当 SomeComponent.vue 被请求时,Vite 的开发服务器会捕获这个请求,并编译该模块,然后将其发送给浏览器。

  • 热更新(HMR)

    • 如果 SomeComponent.vue 在开发过程中被修改,Vite 将通过 HMR 更新浏览器中的组件,而不需要重新加载整个页面。

  • 优化开发体验

    • 按需编译减少了初次加载的时间和资源消耗,同时保持了快速的模块更新和热替换能力。

一句话,Vite 通过按需编译,从而提供更快速的开发体验和更高效的资源管理。
3. 依赖预构建

依赖预构建是 Vite 的一个重要特性,它在项目启动之前预先处理项目依赖,将非 ES 模块转换为 ES 模块,以减少开发时的模块请求次数和提高性能。以下是依赖预构建的案例和解析:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |   |-- some-pkg/
  4. |       |-- package.json
  5. |       |-- index.js
  6. |-- src/
  7. |   |-- main.js
  8. |   |-- App.vue
  9. |-- vite.config.js
  10. |-- package.json
复制代码
文件内容


  • index.js (node_modules/some-pkg/index.js - 一个 CommonJS 模块):
  1.    // CommonJS 模块
  2.    exports.default = function() {
  3.      console.log('CommonJS package loaded');
  4.    };
复制代码

  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import App from './App.vue';
  3.    import somePkg from 'some-pkg';
  4.    somePkg.default(); // 使用预构建的依赖
  5.    const app = createApp(App);
  6.    app.mount('#app');
复制代码

  • App.vue (src/App.vue):
  1.    <template>
  2.      
  3.        <h1>App Component</h1>
  4.      
  5.    </template>
  6.    
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      // 配置选项,例如别名 @ 指向 src 目录
  4.      alias: {
  5.        '@': '/src',
  6.      },
  7.      // 其他配置...
  8.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0",
  7.        "some-pkg": "1.0.0"
  8.      },
  9.      "devDependencies": {
  10.        "vite": "^2.0.0"
  11.      }
  12.    }
复制代码
启动开发服务器

在项目根目录下,运行以下命令来启动开发服务器:
  1. npm run dev
复制代码
依赖预构建过程解析


  • 预构建过程

    • 当 Vite 启动时,它会检查 node_modules 目录中的依赖,并使用 esbuild 这个高性能的 JavaScript 打包器来预构建这些依赖。

  • 转换模块类型

    • 如果依赖是 CommonJS 或其他非 ES 模块类型,esbuild 会将其转换为 ES 模块,以便浏览器能够通过 import 语句加载。

  • 减少请求次数

    • 通过预构建,Vite 可以将多个小的依赖模块合并为一个大的模块,从而减少 HTTP 请求次数,加快页面加载速度。

  • 缓存优化

    • 预构建的依赖会被缓存到 node_modules/.vite 目录中,这样在开发过程中,只有当依赖发生变化时,才会重新构建,否则直接使用缓存。

  • 兼容性

    • 预构建确保了即使在不支持原生 ES 模块的旧版浏览器环境中,依赖也能被正确加载和执行。

  • 开发服务器启动

    • 一旦预构建完成,Vite 将启动开发服务器,提供源代码和预构建依赖的服务。

小结一下,Vite 能够显著提高大型项目的开发效率和性能,同时确保了代码的兼容性和模块的按需加载。
4. 热模块替换(HMR)

热模块替换(Hot Module Replacement)是 Vite 在开发过程中提供的一项功能,它允许开发者在不刷新整个浏览器页面的情况下,替换、添加或删除模块。下面是 HMR 案例和解析,一起来看看:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |-- public/
  4. |-- src/
  5. |   |-- main.js
  6. |   |-- Button.vue
  7. |-- vite.config.js
  8. |-- package.json
复制代码
文件内容


  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import Button from './Button.vue';
  3.    const app = createApp();
  4.    app.component('button-component', Button);
  5.    app.mount('#app');
复制代码

  • Button.vue (src/Button.vue):
  1.    <template>
  2.      <button @click="count++">Count is: {{ count }}</button>
  3.    </template>
  4.    
复制代码

  • index.html (public/index.html):
  1.    <!DOCTYPE html>
  2.    <html lang="en">
  3.    <head>
  4.      <meta charset="UTF-8">
  5.      <title>Vite HMR Demo</title>
  6.    </head>
  7.    <body>
  8.      
  9.        <button-component></button-component>
  10.      
  11.      
  12.    </body>
  13.    </html>
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      // HMR 默认开启,无需额外配置
  4.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0"
  7.      },
  8.      "devDependencies": {
  9.        "vite": "^2.0.0"
  10.      }
  11.    }
复制代码
启动开发服务器

在项目根目录下,运行以下命令来启动开发服务器:
  1. npm run dev
复制代码
HMR 过程解析


  • 开发服务器启动

    • 当你启动 Vite 时,开发服务器会启动,并自动开启 HMR 功能。

  • 修改 Button 组件

    • 假设你正在开发过程中修改了 Button.vue 的模板或脚本。

  • HMR 替换模块

    • 保存文件后,Vite 会编译修改的 Button.vue 组件,并使用 HMR 更新浏览器中的对应模块,而不需要重新加载整个页面。

  • 状态保持

    • 由于 HMR 的特性,Button.vue 中的 count 状态会保持不变,即使组件被重新加载。用户会看到按钮上显示的计数在点击后继续增加,而页面不会刷新。

  • 浏览器开发者工具

    • 在浏览器的开发者工具中,你可以看到网络请求只针对修改的模块,而不是整个资源。

小结一下,我们可以看到 Vite 的 HMR 功能使得开发更加高效,允许开发者快速迭代组件,同时保持应用状态和用户体验。
5. 缓存机制

缓存机制在 Vite 中主要体现在两个方面:HTTP 缓存文件系统缓存。以下是缓存机制的案例和解析:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |-- public/
  4. |-- src/
  5. |   |-- main.js
  6. |   |-- App.vue
  7. |-- vite.config.js
  8. |-- package.json
复制代码
文件内容


  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import App from './App.vue';
  3.    createApp(App).mount('#app');
复制代码

  • App.vue (src/App.vue):
  1.    <template>
  2.      
  3.        <h1>{{ message }}</h1>
  4.      
  5.    </template>
  6.    
复制代码

  • index.html (public/index.html):
  1.    <!DOCTYPE html>
  2.    <html lang="en">
  3.    <head>
  4.      <meta charset="UTF-8">
  5.      <title>Vite Cache Demo</title>
  6.    </head>
  7.    <body>
  8.      
  9.      
  10.    </body>
  11.    </html>
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      // 配置选项...
  4.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0"
  7.      },
  8.      "devDependencies": {
  9.        "vite": "^2.0.0"
  10.      }
  11.    }
复制代码
启动开发服务器

在项目根目录下,运行以下命令来启动开发服务器:
  1. npm run dev
复制代码
缓存机制解析


  • HTTP 缓存

    • Vite 为静态资源设置了 HTTP 缓存头。对于不经常变动的资源(如预构建的依赖),Vite 使用 Cache-Control 响应头,指定资源可以被浏览器缓存。

  • 文件系统缓存

    • Vite 会在 node_modules/.vite 目录下缓存预构建的依赖。当没有发生变化时,Vite 会直接从这个缓存中读取依赖,避免重复构建。

  • 示例操作

    • 假设你修改了 App.vue 中的 message 数据。保存文件后,Vite 会触发 HMR 更新,但不会重新构建整个项目的依赖。

  • 浏览器缓存利用

    • 当你访问开发服务器提供的资源时(如 main.js),浏览器会根据 HTTP 响应头中的缓存指令缓存这些资源。下次访问相同的资源时,如果资源没有更新,浏览器会使用本地缓存,而不是从服务器重新下载。

  • 协商缓存

    • 对于源码文件,Vite 使用 HTTP 协商缓存(如 ETag 或 Last-Modified)。当源文件有更新时,Vite 会更新这些标记,浏览器会根据这些标记判断是否需要从服务器获取新的资源。

  • 开发体验优化

    • 通过缓存机制,Vite 减少了开发过程中的网络传输和重复构建,提高了开发服务器的响应速度和开发体验。

Vite 的缓存机制帮助提高开发效率的同时,减少不必要的资源加载和构建过程,get到了没。
6. 模块路径重写

Vite 在处理模块路径时,需要将基于 Node.js require.resolve 的路径转换为浏览器可识别的路径。此外,Vite 还支持使用 @ 符号作为 src 目录的别名,这在 Vue 单文件组件(SFC)中尤为常见。来看一下这个案例和解析:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |-- public/
  4. |-- src/
  5. |   |-- components/
  6. |   |   |-- MyComponent.vue
  7. |   |-- views/
  8. |   |   |-- Home.vue
  9. |   |-- main.js
  10. |-- vite.config.js
  11. |-- package.json
复制代码
文件内容


  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import Home from '@/views/Home.vue';
  3.    createApp(Home).mount('#app');
复制代码

  • Home.vue (src/views/Home.vue):
  1.    <template>
  2.      
  3.        <h1>Welcome to the Home page</h1>
  4.        <my-component />
  5.      
  6.    </template>
  7.    
复制代码

  • MyComponent.vue (src/components/MyComponent.vue):
  1.    <template>
  2.      I'm a component!
  3.    </template>
  4.    
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      // 设置别名 @ 指向 src 目录
  4.      alias: {
  5.        '@/': '/src/',
  6.        'vue': 'vue/dist/vue.esm.js'
  7.      }
  8.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0"
  7.      },
  8.      "devDependencies": {
  9.        "vite": "^2.0.0"
  10.      }
  11.    }
复制代码
启动开发服务器

在项目根目录下,运行以下命令来启动开发服务器:
  1. npm run dev
复制代码
解析


  • 别名配置

    • 在 vite.config.js 中,我们设置了 @ 别名指向项目的 src 目录。这样,我们就可以使用 @/views/Home.vue 这样的路径来代替相对路径或绝对路径。

  • 模块请求

    • 当 Home.vue 被 main.js 引用时,浏览器会发送一个请求到 Vite 开发服务器,请求 @/views/Home.vue。

  • 路径重写

    • Vite 服务器接收到请求后,会根据配置的别名将 @/views/Home.vue 转换为实际的文件路径 /src/views/Home.vue。

  • 处理单文件组件

    • Vite 使用 es-module-lexer 来解析 import 语句,并根据浏览器对 ES 模块的支持来重写模块路径。

  • 服务模块

    • Vite 将请求的模块进行处理,如果是 Vue 单文件组件,Vite 会将其分解为 .js 和 .css(如果有)等不同的模块,并单独服务这些模块。

  • 浏览器加载

    • 浏览器根据 Vite 服务的路径加载模块,由于路径已经被转换为浏览器可识别的路径,模块能够正确加载并执行。

Vite 通过模块路径重写支持别名和单文件组件的按需加载,从而提高开发效率和模块化管理的便利性,有点意思。
7. 构建优化

构建优化是 Vite 在生产环境下的关键特性,它确保最终的静态资源被压缩、分割和优化以提高应用的性能。以下是构建优化的案例和解析:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |-- public/
  4. |-- src/
  5. |   |-- main.js
  6. |   |-- App.vue
  7. |   |-- SomeLib.js
  8. |-- vite.config.js
  9. |-- package.json
复制代码
文件内容


  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import App from './App.vue';
  3.    import SomeLib from './SomeLib';
  4.    createApp(App).mount('#app');
  5.    // 使用库函数
  6.    SomeLib.doSomething();
复制代码

  • App.vue (src/App.vue):
  1.    <template>
  2.      
  3.        <h1>My Vue App</h1>
  4.      
  5.    </template>
  6.    
复制代码

  • SomeLib.js (src/SomeLib.js):
  1.    export function doSomething() {
  2.      console.log('Library function called');
  3.    }
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    module.exports = {
  3.      build: {
  4.        // 配置生产环境构建选项
  5.        minify: 'terser', // 使用 terser 进行代码压缩
  6.        sourcemap: true,   // 生成 sourcemap 文件
  7.        rollupOptions: {
  8.          output: {
  9.            manualChunks: {
  10.              lib: ['src/SomeLib.js'], // 将 SomeLib.js 单独打包成一个 chunk
  11.            }
  12.          }
  13.        }
  14.      }
  15.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "build": "vite build"
  4.      },
  5.      "dependencies": {
  6.        "vue": "^3.0.0"
  7.      },
  8.      "devDependencies": {
  9.        "vite": "^2.0.0",
  10.        "terser": "^5.0.0"
  11.      }
  12.    }
复制代码
构建项目

在项目根目录下,运行以下命令来构建项目:
  1. npm run build
复制代码
解析一下


  • 配置构建选项

    • 在 vite.config.js 中,我们配置了构建选项,包括代码压缩工具 terser 和 sourcemap 生成。

  • 手动分块

    • 我们使用 rollupOptions 中的 manualChunks 配置将 SomeLib.js 单独打包成一个 chunk,这有助于按需加载和缓存。

  • 执行构建

    • 运行 npm run build 后,Vite 会启动构建流程,根据配置进行代码压缩、分块等操作。

  • 代码压缩

    • 使用 terser,Vite 会压缩 JavaScript 代码,移除多余的空格、注释,并进行一些优化以减少文件大小。

  • 生成 sourcemap

    • 构建过程中,Vite 会生成 sourcemap 文件,这有助于在生产环境中调试代码。

  • 输出构建结果

    • 构建完成后,Vite 会在 dist 目录下生成优化后的静态资源,包括 JavaScript、CSS 和其他静态资源文件。

  • 部署

    • 构建结果可以直接部署到生产服务器,由于进行了优化,应用的加载速度和性能会得到提升。

Vite在生产环境中进行构建优化,包括代码压缩、手动分块、sourcemap 生成等,以确保应用的性能和可维护性。
8. 插件系统

Vite 的插件系统允许开发者扩展 Vite 的功能,例如添加对特定类型文件的支持、优化构建流程等,来看一下:
项目结构

假设我们有以下项目结构:
  1. /my-vue-app
  2. |-- node_modules/
  3. |-- src/
  4. |   |-- main.js
  5. |   |-- App.vue
  6. |   |-- assets/
  7. |       |-- https://www.cnblogs.com/image.png
  8. |-- vite.config.js
  9. |-- package.json
复制代码
文件内容


  • main.js (src/main.js):
  1.    import { createApp } from 'vue';
  2.    import App from './App.vue';
  3.    import './assets/https://www.cnblogs.com/image.png';
  4.    createApp(App).mount('#app');
复制代码

  • App.vue (src/App.vue):
  1.    <template>
  2.      
  3.        <img src="https://www.cnblogs.com/image.png" alt="Image">
  4.      
  5.    </template>
  6.    
复制代码

  • vite.config.js (vite.config.js):
  1.    // vite.config.js
  2.    import vue from '@vitejs/plugin-vue';
  3.    import path from 'path';
  4.    import imageTransformPlugin from './imageTransformPlugin'; // 假设我们创建了一个自定义插件
  5.    module.exports = {
  6.      plugins: [
  7.        vue(), // Vite 官方 Vue 插件,用于处理 Vue 单文件组件
  8.        imageTransformPlugin, // 使用自定义插件来处理图像转换
  9.      ],
  10.      // 其他配置...
  11.    };
复制代码

  • imageTransformPlugin.js (imageTransformPlugin.js):
  1.    // 自定义插件来处理图像文件
  2.    export default {
  3.      name: 'image-transform-plugin',
  4.      transform(code, id) {
  5.        if (id.endsWith('.png')) {
  6.          // 假设我们对图像进行某种转换处理
  7.          const transformedCode = code.replace(/.png$/, '-transformed.png');
  8.          return {
  9.            code: transformedCode,
  10.            map: null, // 这里简化处理,实际插件应该生成 sourcemap
  11.          };
  12.        }
  13.      },
  14.    };
复制代码

  • package.json (package.json):
  1.    {
  2.      "scripts": {
  3.        "dev": "vite",
  4.        "build": "vite build"
  5.      },
  6.      "dependencies": {
  7.        "vue": "^3.0.0"
  8.      },
  9.      "devDependencies": {
  10.        "@vitejs/plugin-vue": "^2.0.0",
  11.        "vite": "^2.0.0"
  12.      }
  13.    }
复制代码
使用插件


  • 安装插件

    • 首先,我们安装了 @vitejs/plugin-vue,这是 Vite 官方提供的插件,用于支持 Vue 单文件组件。

  • 创建自定义插件

    • 我们创建了一个名为 imageTransformPlugin 的自定义插件,用于处理图像文件的转换。

  • 配置插件

    • 在 vite.config.js 中,我们将这两个插件添加到 plugins 数组中,这样 Vite 在构建时就会应用这些插件。

  • 运行 Vite

    • 当你运行 npm run dev 或 npm run build 时,Vite 会使用配置的插件来处理项目资源。

过程解析


  • Vue 插件 (@vitejs/plugin-vue):

    • 这个插件使得 Vite 能够识别和处理 .vue 文件,将它们分解为 JavaScript、CSS 和模板代码,并应用 HMR。

  • 自定义图像转换插件 (imageTransformPlugin):

    • 我们的自定义插件拦截了以 .png 结尾的文件请求,并对其进行了简单的“转换”(这里只是示例,实际中可能是更复杂的图像处理逻辑)。

  • 插件钩子

    • Vite 插件系统提供了多种钩子(例如 transform),允许插件在构建过程中的不同阶段介入和修改处理逻辑。

  • 应用插件

    • 当请求图像资源时,Vite 会首先查找是否有插件处理该资源。在我们的案例中,自定义插件会拦截请求并返回“转换”后的资源。

Vite 插件系统允许开发者自定义构建流程,增强 Vite 的功能,以适应各种开发需求。
最后

除了以上这些,Vite 还对 Vue 3 和 React 17+ 的官方支持,允许开发者使用这些前端框架进行开发。Vite 内置了对 TypeScript 的支持,无需额外配置即可使用 TypeScript 开发。Vite能够处理 CSS 文件和各种静态资源,包括图片、字体等,并支持 CSS 预处理器。Vite 能够生成 Sourcemap,方便开发者在浏览器中调试源代码。Vite 支持在构建过程中注入环境变量,使得配置更加灵活。如果你还知道哪些关于 Vite 的能力,欢迎给 V 哥点拨一下,在此感谢。
这些核心组件功能共同构成了 Vite 的强大能力,使它成为一个高效、灵活且易于使用的前端构建工具,如果你还没用上 Vite,那就抓紧搞起来吧。

来源:https://www.cnblogs.com/wgjava/p/18373550
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具