对vite的理解

快速的冷启动

"快速的冷启动"指的是在开发过程中，当你启动应用程序或重新启动开发服务器时，Vite 能够迅速加载应用程序。

由于不需要进行打包和编译的操作，Vite 的冷启动过程非常快速。它可以快速加载和解析源码文件，准备好开发环境，从而可以更快地启动应用程序并开始开发工作，加速了开发过程中的热重载和重新构建操作。

即时的热模块替换（HMR）

即时的热模块替换（HMR）是指在开发过程中，当你对代码进行修改后，Vite 能够实时更新修改的模块，而无需完全刷新整个页面或重新加载整个应用程序。

零配置的开发环境

Vite提供了零配置的开发环境，减少了配置的复杂性。开发者可以在项目中使用常见的前端开发工具和框架（如Vue.js、React等），而无需繁琐的配置文件。

• Vite 的预解析（Pre-Bundling）
  "Vite 的预解析"是指在构建阶段对项目的源码进行静态分析和预处理，以提前解析模块的依赖关系和生成优化的代码块，从而提高构建性能和减少启动延迟。
  在传统的打包工具中，如 webpack，在构建阶段需要扫描整个项目的源码，解析模块的依赖关系，并进行相应的打包和编译操作。这个过程可能会耗费一定的时间，特别是在大型项目中或者项目依赖较多的情况下。
  Vite 利用了现代浏览器对 ES 模块的原生支持，可以通过静态分析和预处理源码，提前解析模块的依赖关系，从而减少构建时的工作量和时间。
  具体来说，Vite 的预解析包括以下步骤：

  • 1、静态分析：Vite 会对项目的源码进行静态分析，解析模块之间的依赖关系。它会查找 import 和 export 语句，分析模块的引用关系。

  • 2、模块解析：Vite 会根据模块的路径，解析模块的实际位置，并标记模块的类型（例如 JavaScript、CSS、JSON 等）。

  • 3、优化的代码块生成：根据模块的依赖关系，Vite 会生成优化的代码块（Code Splitting），将相关的模块打包到同一个代码块中。这样可以提高代码的加载效率，减少不必要的网络请求。

  • 4、缓存：Vite 会缓存解析过的模块和依赖关系，以便后续的构建过程可以直接使用缓存，避免重复解析和编译。

vite打包原理

Vite 在开发阶段通过浏览器原生的 ES 模块加载器直接加载源码文件，并实现了即时的热模块替换。在构建阶段，Vite 使用 Rollup 进行优化的构建，仅处理入口文件和模块的依赖关系，生成优化的代码块。这种基于原生 ES 模块加载器和优化的构建策略，使得 Vite 在开发过程中能够提供快速的冷启动和即时的热模块替换，同时在生产环境中生成高性能的代码。

• 开发阶段（Development Phase）：
  Vite 利用浏览器原生的 ES 模块加载器（ES Module Loader）来直接加载源码文件，而不需要进行打包。这意味着每个源码文件都被视为一个独立的模块。
  当浏览器请求某个模块时，Vite 根据模块路径直接返回对应的源码文件。
  在开发过程中，Vite 会监视文件变化，当某个模块的源码文件发生修改时，它会通过 WebSocket 或 HMR 运行时将更新的模块代码推送到浏览器端，实现即时的热模块替换（HMR）。
• 构建阶段（Build Phase）：
  当项目准备部署到生产环境时，Vite 会执行构建操作，将源码文件转换为生产环境可用的代码。
  Vite 使用 Rollup 进行构建，但与传统的 Rollup 打包方式不同，Vite 仅处理入口文件，并根据模块的依赖关系生成优化的代码块（Code Splitting）。
  Vite 通过预先解析和缓存模块的依赖关系，可以避免不必要的文件扫描和重新编译，提高了构建速度。
  Vite 会根据需要对代码进行转换和优化，例如压缩代码、处理静态资源等。
  最终，Vite 生成优化后的代码块和资源文件，用于生产环境的部署。

vite配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs' // 让浏览器支持commonjs语法
import inject from '@rollup/plugin-inject'
import viteCompression from 'vite-plugin-compression'
import path from "path"
// import url from '@rollup/plugin-url';
console.log(process.env.VITE_API_SECRET, 'VITE_API_SECRET')
export default defineConfig({
  build: {
    minify: 'esbuild', // 默认
  },
  esbuild: {
    drop: ['console', 'debugger'],//打包去除
  },
  plugins: [
    vue(),
    viteCompression({ threshold: 1024000 }),
    AutoImport({
      imports: ['vue', 'vue-router']//自动导入vue和vue-router相关函数
    }),
    esbuildCommonjs(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
    },
    extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
  },
  server: {
    port: 8070,
    host: true,
    open: true, 
    proxy: {
      '/file_service': {
        target: `http:/xxx`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/file_service/, ""),
      }, 
      '/webhooks': { 
        target: `http://xxxx`, 
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/webhooks/, "/webhooks"),
      }
    },
    hmr: true,  // 开启热更新 
  }
})