对vite的理解

news2024/11/28 6:53:58

🐱 个人主页：不叫猫先生，公众号：前端舵手
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3+vite+typeScript从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼(文末有我wx或者私信)。

对vite的理解

快速的冷启动

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

vite	webpack
Vite 利用了 ES 模块的原生支持，它在冷启动过程中无需进行打包和编译操作，而是直接基于原始的源码文件来运行应用程序。它通过使用浏览器原生的 ES 模块加载器来实现，这个加载器可以直接从浏览器中加载和解析 ES 模块。	传统的构建工具（如 webpack）在启动过程中需要先进行构建和打包操作，生成中间文件和编译后的代码，然后再启动开发服务器。这个过程可能会耗费一定的时间，特别是在大型项目中或者项目依赖较多的情况下。

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

即时的热模块替换（HMR）

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

vite	webpack
Vite 利用了热模块替换（HMR）的技术，它能够在保持应用程序状态的同时，仅仅更新修改过的模块。当你修改了某个模块的代码后，Vite 会通过 WebSocket 或者 HMR 运行时，将新的模块代码发送到浏览器中。浏览器接收到更新后的模块代码后，会立即应用这些变化，而不需要刷新整个页面。	在代码发生变化时，需要刷新整个页面或重新加载整个应用程序，以查看更新后的效果。这会导致开发者在每次修改代码后都需要手动刷新页面，增加了开发的时间和复杂性。

零配置的开发环境

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,  // 开启热更新 
  }
})