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

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 来启动开发服务器。以下是项目的目录结构和关键文件：

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

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>

main.js
(
src/main.js
):

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

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

App.vue
(
src/App.vue
):

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

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

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

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

package.json
(
package.json
):

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

启动开发服务器

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

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 进行按需编译的案例和解析：

项目结构

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

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

文件内容

main.js
(
src/main.js
):

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

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

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>

SomeComponent.vue
(
src/SomeComponent.vue
):

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

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

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

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

package.json
(
package.json
):

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

启动开发服务器

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

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 模块，以减少开发时的模块请求次数和提高性能。以下是依赖预构建的案例和解析：

项目结构

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

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

文件内容

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

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

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');

App.vue
(
src/App.vue
):

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

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

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

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

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

依赖预构建过程解析

预构建过程
：
- 当 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 案例和解析，一起来看看：

项目结构

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

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

文件内容

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');

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>

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>

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

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

package.json
(
package.json
):

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

启动开发服务器

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

npm run dev

HMR 过程解析

开发服务器启动
：
- 当你启动 Vite 时，开发服务器会启动，并自动开启 HMR 功能。
修改 Button 组件
：
- 假设你正在开发过程中修改了
  Button.vue
  的模板或脚本。
HMR 替换模块
：
- 保存文件后，Vite 会编译修改的
  Button.vue
  组件，并使用 HMR 更新浏览器中的对应模块，而不需要重新加载整个页面。
状态保持
：
- 由于 HMR 的特性，
  Button.vue
  中的
  count
  状态会保持不变，即使组件被重新加载。用户会看到按钮上显示的计数在点击后继续增加，而页面不会刷新。
浏览器开发者工具
：
- 在浏览器的开发者工具中，你可以看到网络请求只针对修改的模块，而不是整个资源。

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

5. 缓存机制

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

项目结构

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

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

文件内容

main.js
(
src/main.js
):

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

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

App.vue
(
src/App.vue
):

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

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

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>

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

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

package.json
(
package.json
):

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

启动开发服务器

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

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）中尤为常见。来看一下这个案例和解析：

项目结构

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

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

文件内容

main.js
(
src/main.js
):

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

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

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>

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

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

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

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

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

package.json
(
package.json
):

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

启动开发服务器

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

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

项目结构

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

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

文件内容

main.js
(
src/main.js
):

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

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

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

App.vue
(
src/App.vue
):

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

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

SomeLib.js
(
src/SomeLib.js
):

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

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
           }
         }
       }
     }
   };

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

解析一下

配置构建选项
：
- 在
  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 的功能，例如添加对特定类型文件的支持、优化构建流程等，来看一下：

项目结构

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

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

文件内容

main.js
(
src/main.js
):

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

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

App.vue
(
src/App.vue
):

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

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

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, // 使用自定义插件来处理图像转换
     ],
     // 其他配置...
   };

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
         };
       }
     },
   };

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"
     }
   }

使用插件

安装插件
：
- 首先，我们安装了
  @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，那就抓紧搞起来吧。

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

1. 开发服务器（Dev Server）

来看一个案例

启动开发服务器

具体解析一下

2. 按需编译

项目结构

文件内容

启动开发服务器

按需编译解析

3. 依赖预构建

项目结构

文件内容

启动开发服务器

依赖预构建过程解析

4. 热模块替换（HMR）

项目结构

文件内容

启动开发服务器

HMR 过程解析

5. 缓存机制

项目结构

文件内容

启动开发服务器

缓存机制解析

6. 模块路径重写

项目结构

文件内容

启动开发服务器

解析

7. 构建优化

项目结构

文件内容

构建项目

解析一下

8. 插件系统

项目结构

文件内容

使用插件

过程解析

最后

添加新评论

最新文章

最近回复

分类

归档

其它