AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-08-22 192
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
全局流量管理 GTM，标准版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
云解析 DNS，旗舰版 1个月
简介： Vite 是一款前沿的前端构建工具，以其闪电般的开发服务器和高效的生产构建而著称。它利用现代浏览器对 ES 模块的支持，在开发环境中提供快速启动及按需加载，显著提升了开发体验。Vite 的核心组件包括开发服务器、按需编译、依赖预构建、热模块替换（HMR）、缓存机制、模块路径重写、构建优化和插件系统。通过这些功能，Vite 实现了快速的模块加载、高效的模块更新、减少网络请求、以及生产环境下的代码压缩和优化。Vite 还支持多种前端框架和技术栈，内置 TypeScript 支持，并能处理 CSS 和静态资源，极大地方便了开发者的日常开发工作。

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

  1. 原理分析：

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

  2. 源码实现：

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

  3. 使用技巧：

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

  4. Vite 相对于 Webpack 的优势：

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

Vite 的设计哲学是尽可能利用现代浏览器的能力，减少不必要的打包操作，从而提高开发效率。在生产环境中，Vite 使用 Rollup 进行打包，确保了最终产物的优化和性能 。

Vite 的核心组件功能主要包括以下几个方面：

  1. 开发服务器（Dev Server）：

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

  2. 按需编译：

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

  3. 依赖预构建：

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

  4. 热模块替换（HMR）：

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

  5. 缓存机制：

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

  6. 模块路径重写：

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

  7. 构建优化：

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

  8. 插件系统：

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

下面 V 哥将一一介绍这些核心功能并结合案例讲解。

1. 开发服务器（Dev Server）

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

来看一个案例

假设我们有一个简单的 Vue 3 项目，我们希望使用 Vite 来启动开发服务器。以下是项目的目录结构和关键文件：

/my-vue-app
|-- node_modules
|-- public
|   |-- index.html
|-- src
|   |-- main.js
|   |-- App.vue
|-- vite.config.js
|-- package.json

  1. index.html (public/index.html):

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vite Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

  2. main.js (src/main.js):

    import {
      createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

  3. App.vue (src/App.vue):

    <template>
  <div>
    <h1>{
    { message }}</h1>
  </div>
</template>

<script setup>
const message = 'Hello Vite!';
</script>

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  // 配置选项...
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0"
  }
}

启动开发服务器

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

这个命令会执行 package.json 中定义的 "dev" 脚本，使用 Vite 启动开发服务器。

具体解析一下

  1. 服务启动：

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

  2. 模块服务：

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

  3. 按需加载：

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

  4. 热更新（HMR）：

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

  5. 源码映射（Sourcemap）：

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

  6. 开发与生产分离：

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

2. 按需编译

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- App.vue
|   |-- SomeComponent.vue
|-- vite.config.js
|-- package.json

文件内容

  1. main.js (src/main.js):

    import {
      createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

  2. App.vue (src/App.vue):

    <template>
  <div>
    <h1>Home Page</h1>
    <button @click="loadComponent">Load Component</button>
  </div>
</template>

<script>
import SomeComponent from './SomeComponent.vue';

export default {
  methods: {
    loadComponent() {
      this.$forceUpdate();
      this.$options.components.SomeComponent = SomeComponent;
    }
  }
}
</script>

  3. SomeComponent.vue (src/SomeComponent.vue):

    <template>
  <div>
    <h2>I'm a lazy-loaded component!</h2>
  </div>
</template>

<script>
export default {
  name: 'SomeComponent'
}
</script>

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  // 配置选项...
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0"
  }
}

启动开发服务器

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

按需编译解析

  1. 首次加载：

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

  2. 按需加载组件：

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

  3. 编译请求的模块：

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

  4. 热更新（HMR）：

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

  5. 优化开发体验：

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

一句话，Vite 通过按需编译，从而提供更快速的开发体验和更高效的资源管理。

3. 依赖预构建

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|   |-- some-pkg/
|       |-- package.json
|       |-- index.js
|-- src/
|   |-- main.js
|   |-- App.vue
|-- vite.config.js
|-- package.json

文件内容

  1. index.js (node_modules/some-pkg/index.js - 一个 CommonJS 模块):

    // CommonJS 模块
exports.default = function() {
     
  console.log('CommonJS package loaded');
};

  2. main.js (src/main.js):

    import {
      createApp } from 'vue';
import App from './App.vue';
import somePkg from 'some-pkg';

somePkg.default(); // 使用预构建的依赖

const app = createApp(App);
app.mount('#app');

  3. App.vue (src/App.vue):

    <template>
  <div>
    <h1>App Component</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  // 配置选项，例如别名 @ 指向 src 目录
  alias: {
     
    '@': '/src',
  },
  // 其他配置...
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite"
  },
  "dependencies": {
     
    "vue": "^3.0.0",
    "some-pkg": "1.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0"
  }
}

启动开发服务器

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

依赖预构建过程解析

  1. 预构建过程：

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

  2. 转换模块类型：

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

  3. 减少请求次数：

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

  4. 缓存优化：

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

  5. 兼容性：

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

  6. 开发服务器启动：

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

小结一下，Vite 能够显著提高大型项目的开发效率和性能，同时确保了代码的兼容性和模块的按需加载。

4. 热模块替换（HMR）

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- Button.vue
|-- vite.config.js
|-- package.json

文件内容

  1. main.js (src/main.js):

    import {
      createApp } from 'vue';
import Button from './Button.vue';

const app = createApp();
app.component('button-component', Button);
app.mount('#app');

  2. Button.vue (src/Button.vue):

    <template>
  <button @click="count++">Count is: {
    { count }}</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

  3. index.html (public/index.html):

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vite HMR Demo</title>
</head>
<body>
  <div id="app">
    <button-component></button-component>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  // HMR 默认开启，无需额外配置
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0"
  }
}

启动开发服务器

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

HMR 过程解析

  1. 开发服务器启动：

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

  2. 修改 Button 组件：

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

  3. HMR 替换模块：

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

  4. 状态保持：

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

  5. 浏览器开发者工具：

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

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

5. 缓存机制

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- App.vue
|-- vite.config.js
|-- package.json

文件内容

  1. main.js (src/main.js):

    import {
      createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

  2. App.vue (src/App.vue):

    <template>
  <div>
    <h1>{
    { message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vite!'
    };
  }
}
</script>

  3. index.html (public/index.html):

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vite Cache Demo</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  // 配置选项...
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0"
  }
}

启动开发服务器

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

缓存机制解析

  1. HTTP 缓存：

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

  2. 文件系统缓存：

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

  3. 示例操作：

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

  4. 浏览器缓存利用：

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

  5. 协商缓存：

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

  6. 开发体验优化：

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

Vite 的缓存机制帮助提高开发效率的同时，减少不必要的资源加载和构建过程，get到了没。

6. 模块路径重写

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- components/
|   |   |-- MyComponent.vue
|   |-- views/
|   |   |-- Home.vue
|   |-- main.js
|-- vite.config.js
|-- package.json

文件内容

  1. main.js (src/main.js):

    import {
      createApp } from 'vue';
import Home from '@/views/Home.vue';

createApp(Home).mount('#app');

  2. Home.vue (src/views/Home.vue):

    <template>
  <div>
    <h1>Welcome to the Home page</h1>
    <my-component />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

  3. MyComponent.vue (src/components/MyComponent.vue):

    <template>
  <div>I'm a component!</div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  // 设置别名 @ 指向 src 目录
  alias: {
     
    '@/': '/src/',
    'vue': 'vue/dist/vue.esm.js'
  }
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0"
  }
}

启动开发服务器

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

解析

  1. 别名配置：

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

  2. 模块请求：

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

  3. 路径重写：

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

  4. 处理单文件组件：

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

  5. 服务模块：

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

  6. 浏览器加载：

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

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

7. 构建优化

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- App.vue
|   |-- SomeLib.js
|-- vite.config.js
|-- package.json

文件内容

  1. main.js (src/main.js):

    import {
      createApp } from 'vue';
import App from './App.vue';
import SomeLib from './SomeLib';

createApp(App).mount('#app');

// 使用库函数
SomeLib.doSomething();

  2. App.vue (src/App.vue):

    <template>
  <div id="app">
    <h1>My Vue App</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

  3. SomeLib.js (src/SomeLib.js):

    export function doSomething() {
     
  console.log('Library function called');
}

  4. vite.config.js (vite.config.js):

    // vite.config.js
module.exports = {
     
  build: {
     
    // 配置生产环境构建选项
    minify: 'terser', // 使用 terser 进行代码压缩
    sourcemap: true,   // 生成 sourcemap 文件
    rollupOptions: {
     
      output: {
     
        manualChunks: {
     
          lib: ['src/SomeLib.js'], // 将 SomeLib.js 单独打包成一个 chunk
        }
      }
    }
  }
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "build": "vite build"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "vite": "^2.0.0",
    "terser": "^5.0.0"
  }
}

构建项目

在项目根目录下，运行以下命令来构建项目：

npm run build

解析一下

  1. 配置构建选项：

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

  2. 手动分块：

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

  3. 执行构建：

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

  4. 代码压缩：

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

  5. 生成 sourcemap：

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

  6. 输出构建结果：

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

  7. 部署：

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

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

8. 插件系统

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

项目结构

假设我们有以下项目结构：

/my-vue-app
|-- node_modules/
|-- src/
|   |-- main.js
|   |-- App.vue
|   |-- assets/
|       |-- image.png
|-- vite.config.js
|-- package.json

文件内容

  1. main.js (src/main.js):

    import {
      createApp } from 'vue';
import App from './App.vue';
import './assets/image.png';

createApp(App).mount('#app');

  2. App.vue (src/App.vue):

    <template>
  <div>
    <img src="image.png" alt="Image">
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

  3. vite.config.js (vite.config.js):

    // vite.config.js
import vue from '@vitejs/plugin-vue';
import path from 'path';
import imageTransformPlugin from './imageTransformPlugin'; // 假设我们创建了一个自定义插件

module.exports = {
     
  plugins: [
    vue(), // Vite 官方 Vue 插件，用于处理 Vue 单文件组件
    imageTransformPlugin, // 使用自定义插件来处理图像转换
  ],
  // 其他配置...
};

  4. imageTransformPlugin.js (imageTransformPlugin.js):

    // 自定义插件来处理图像文件
export default {
     
  name: 'image-transform-plugin',

  transform(code, id) {
     
    if (id.endsWith('.png')) {
     
      // 假设我们对图像进行某种转换处理
      const transformedCode = code.replace(/.png$/, '-transformed.png');
      return {
     
        code: transformedCode,
        map: null, // 这里简化处理，实际插件应该生成 sourcemap
      };
    }
  },
};

  5. package.json (package.json):

    {
     
  "scripts": {
     
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
     
    "vue": "^3.0.0"
  },
  "devDependencies": {
     
    "@vitejs/plugin-vue": "^2.0.0",
    "vite": "^2.0.0"
  }
}

使用插件

  1. 安装插件：

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

  2. 创建自定义插件：

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

  3. 配置插件：

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

  4. 运行 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，那就抓紧搞起来吧。

文章标签：
云解析DNS
缓存
前端开发
JavaScript
开发者
UED
威哥爱编程
目录
相关文章
LiBihao
|
资源调度 关系型数据库 MySQL
若依框架部署从零开始2023版（前后端分离）
电脑最近重装了一次系统，目前什么都没有安装，记录一下从零开始部署前后端分离版本的若依框架系统先去官网把若依源码拉下来。
LiBihao
754 0
刘丹冰
|
7月前
|
存储 测试技术 Go
Golang框架实战-KisFlow流式计算框架(2)-项目构建/基础模块-(上)
KisFlow项目源码位于&lt;https://github.com/aceld/kis-flow，初始阶段涉及项目构建和基础模块定义。首先在GitHub创建仓库，克隆到本地。项目目录包括`common/`, `example/`, `function/`, `conn/`, `config/`, `flow/`, 和 `kis/`。`go.mod`用于包管理，`KisLogger`接口定义了日志功能，提供不同级别的日志方法。默认日志对象`kisDefaultLogger`打印到标准输出。
刘丹冰
670 8
Golang框架实战-KisFlow流式计算框架(2)-项目构建/基础模块-(上)
Sunny_yiyi
|
7月前
|
JavaScript 前端开发 应用服务中间件
若依框架vue分离版-前端部署
若依框架vue分离版-前端部署
Sunny_yiyi
138 1
雪碧有白泡泡
|
7月前
|
缓存 前端开发 中间件
Apollo生态系统探索：更多工具与框架的介绍
Apollo生态系统探索：更多工具与框架的介绍
雪碧有白泡泡
100 0
田八
|
7月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
田八
104 1
C哩C哩li
|
7月前
|
资源调度 JavaScript 前端开发
深度剖析 Vite 配置
深度剖析 Vite 配置
C哩C哩li
249 1
编程乐趣
|
监控 数据可视化 前端开发
一个.NetCore前后端分离、模块化、插件式的通用框架
一个.NetCore前后端分离、模块化、插件式的通用框架
编程乐趣
231 0
陌上少年，且听这风吟
|
JavaScript 前端开发 索引
如何快速上手Vue框架?（中）
如何快速上手Vue框架?（中）
陌上少年，且听这风吟
87 0
陌上少年，且听这风吟
|
JavaScript
如何快速上手Vue框架?（上）
如何快速上手Vue框架?（上）
陌上少年，且听这风吟
80 0
陌上少年，且听这风吟
|
JavaScript 开发者
如何快速上手Vue框架?（下）
如何快速上手Vue框架?（下）
陌上少年，且听这风吟
70 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    40
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    102
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    29
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    34
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    39
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    26
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    102
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    254
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    150
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    34

    • 相关课程

    更多
  • 前端开发框架Bootstrap使用教程
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • 前端自动化构建工具 Webpack
  • Cloud Toolkit 开发部署效率提升神器
  • React 入门与实战
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • React在大型后台管理项目中的工程实践
  • React在大型后台管理项目中的工程实践
  • ReactNative实战优化之路

    • 相关实验场景

    更多
  • 语言入门-1：环境构建
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 通过部署流行Web框架掌握Serverless技术
  • 零基础部署一个Django Blog到Serverless架构
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    DataWorks