Vite

原理

Vite 的工作原理主要基于两个主要环节：开发（Dev）和构建（Build）。

开发环节（Dev）
在开发环节，Vite 利用了现代浏览器原生支持的 ES 模块（ESM）进行开发服务器的工作。当一个源文件被请求时，Vite 会立即对其进行转换和编译，然后发送给浏览器。这种方式省去了打包步骤，使得服务器启动极快。
除此之外，Vite 提供了高效的热模块替换（Hot Module Replacement，HMR）。当一个文件被修改时，Vite 会准确地推导出需要更新的模块，然后只重新编译这部分模块，而不是整个应用，这样可以实现更快的更新速度。
构建环节（Build）
在构建环节，Vite 使用 Rollup 进行预构建和打包。Rollup 是一个高效的模块捆绑器，它可以利用 ESM 的静态结构特性，实现更有效的代码摇树（tree shaking），生成更小的构建体积。同时，Rollup 还支持高效的代码拆分和动态导入，可以生成更高效的代码。
Vite 还提供了一种插件系统，允许开发者使用 Rollup 插件，以及专为 Vite 设计的插件，这样可以扩展 Vite 的功能。
依赖预编译
Vite 会在开发环境中预编译所有依赖，将其转换为更有效的 ESM 格式，以提高开发环境的加载速度。这是因为一些第三方库可能包含复杂的或不常用的语法特性，这些特性在浏览器中可能无法直接运行，或者运行效率低下。通过预编译，可以将这些库转换为更简单、更高效的格式。

以上就是 Vite 的主要工作原理。通过这种方式，Vite 实现了快速的开发环境启动、高效的模块热替换、高效的构建等功能，大大提高了前端开发的效率。

运行机制

Vite 是由尤雨溪（Vue.js 的作者）开发的一种新型前端构建工具，它采用了一种新颖的开发和构建策略，以提高开发效率和构建速度。下面是 Vite 的主要运行机制：

开发环境： 在开发环境中，Vite 利用了现代浏览器支持的原生 ES 模块（ESM）特性，能够实现按需加载和即时编译，这样就无需预构建，可以大大提高开发环境的启动速度。
热模块替换（HMR）： Vite 提供了更精细的热模块替换机制。当文件发生变化时，只有被修改的文件会被重新编译和更新，而不是整个应用，这样可以实现更快的更新速度。
构建环境： 在生产环境中，Vite 使用 Rollup 进行打包。Rollup 是一种高效的模块捆绑器，它利用 ESM 的静态结构特性，可以实现更有效的代码摇树（tree shaking）和更小的构建体积。
插件系统： Vite 还提供了一种插件系统，允许开发者使用 Rollup 插件，以及专为 Vite 设计的插件，这样可以扩展 Vite 的功能。
开箱即用： Vite 支持 Vue、React 和 Preact 等现代框架，并提供了一键生成项目的脚手架功能。
CSS 代码分割： Vite 支持 CSS 代码分割，可以将 CSS 代码分割成多个独立的文件，以优化加载性能。
依赖预编译： Vite 可以预编译依赖，将其转换为更有效的 ESM 格式，以提高开发环境的加载速度。

以上就是 Vite 的主要运行机制，它的出现极大地改善了前端开发的体验和效率，可以说是现代前端工程化的一个重要里程碑。

配置示例

Vite 的配置通常在项目根目录下的vite.config.js文件中进行。以下是一个基本的 Vite 配置示例：

javascript

// vite.config.js
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
  base: "./", // 设置打包路径
  server: {
    port: 8080, // 设置服务启动端口号
    open: true, // 自动打开浏览器
    cors: true, // 允许跨域
    // 设置代理，可以根据实际情况配置
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  resolve: {
    alias: {
      // 设置别名
      "@": "/src",
    },
  },
  build: {
    outDir: "dist", // 指定输出路径
    assetsDir: "assets", // 指定生成静态资源的存放路径
  },
});

在这个配置文件中，我们使用了 Vite 的 Vue 插件，设置了打包路径、服务启动端口号、是否自动打开浏览器、是否允许跨域、代理设置、路径别名、输出路径和静态资源的存放路径等选项。

需要注意的是，Vite 的配置是非常灵活的，可以根据项目的实际需求进行适当的修改和调整。

Vite ​

原理 ​

运行机制 ​

配置示例 ​

Vite

原理

运行机制

配置示例