Vite5基础进阶和原理剖析

Vite5 的核心和基础使用

核心设计

1. 木块化规范演进：commonjs -> amd -> cmd -> umd -> esmodule
2. bundleless 模式，取决于浏览器原生ESModule的支持
3. 本地开发 esbuild，线上构建 rollup

基本使用

1. 脚手架初始化项目
2. 工程化、规范、自动化
3. 配置 Vite 体系。哪些内容需要打包，需要编译什么内容
   1. react 项目：@vitejs/plugin-react
   2. vue 项目：@vitejs/plugin-vue
   3. 官方文档，@vitejs/plugin-xxx
   4. unbundle
   5. vite-awesome

初始化项目

pnpm create vite 项目名 --template [react-ts/vue-ts]

vite.config.ts配置

1. plugins

2. resolve

3. server

4. build

5. manualChunks 静态拆包

6. 模块懒加载

   import('./src/utils').then((res) => {
       console.log(res)
   })

   上面代码会被单独打包成一个文件

7. define 配置项用于在编译时定义全局常量，它会在代码被打包构建的过程中，将你指定的标识符替换为对应的值。简单来说，就是让你可以在源代码中直接使用一些 “全局变量”，而这些变量会在构建阶段被静态替换为具体内容。

   核心作用

   • 注入全局常量：在代码中直接使用预定义的常量（如环境标识、API 地址等），无需手动导入。
   • 编译时替换：替换发生在构建阶段，而非运行时，不会增加运行时开销。
   • 条件编译：可以根据不同环境定义不同的值，实现代码的条件执行（如开发环境打印日志，生产环境移除日志）。

     import {defineConfig} from 'vite'
     import react from '@vitejs/plugin-react'
     
     export default defineConfig({
         plugins: [react()],
         // 模块化解析
         resolve: {
             // 别名
             alias: {
                 "@": "src"
             }
         },
         // 服务配置
         server: {
             port: 3000,
             open: true,
             // 跨域配置
             proxy: {
                 '/api': {
                     target: 'https://www.baidu.com',
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api/, '')
                 }
             }
         },
         // 构建配置
         build: {
             outDir: 'dist', // 打包输出目录
             assetsDir: 'assets', // 静态资源输出目录
             minify: 'terser', // 压缩，默认是压缩的, 也可以设置为 'esbuild'
             sourcemap: true, // 生成 sourcemap 文件，开发环境下使用。如果是生产环境的话，可以用@sentry/vite-plugin 插件上传 sourcemap 文件，在 sentry 平台查看源代码。
             terserOptions: {
                 // 压缩选项
                 compress: {
                     drop_console: true, // 移除 console
                     drop_debugger: true, // 移除 debugger
                 }
             },
             // 构建产物优化，代码分割
             rollupOptions: {
                 // 入口文件配置
                 input: {
                     main: resolve(__dirname, 'index.html'), // 入口文件
                     nested: resolve(__dirname, 'nested/index.html'), // 嵌套入口文件
                 },
                 output: {
                     // 手动代码分割
                     // manualChunks:{
                     //     'react-vendor': ['react', 'react-dom'], // 将 react 相关的都打到同一个包里
                     //     'antd-vendor': ['antd'], // 将 antd 相关的都打到同一个包里
                     // }
                     manualChunks(id) {
                         // id 是模块的路径，根据路径匹配来代码分割
                         // 比如：node_modules/react/index.js
                         if (id.includes('node_modules')) {
                             return id.toString().split('node_modules/')[1].split('/')[0].toString()
                         }
                     }
                 }
             }
         },
         css: {
             modules: {
                 // 仅对 CSS Modules 有效：即文件名需包含 .module（如 xxx.module.css、xxx.module.scss）的样式文件才会应用此配置。
                 hashPrefix: 'hash',
             }
         },
         define: {
             IS_PROD: process.env.NODE_ENV === 'production',
             /*
             * 在 js 或者组件中可以直接使用这个变量：
             * if (IS_PROD) {
             *      console.log('生产环境'); // 生产环境构建时，这里会被替换为 true
             * } else {
             *      console.log('开发环境'); // 开发环境构建时，这里会被替换为 false
             * } 
             */
         },
         json: {
             namedExports: false, // 禁用命名导出，默认是开启的
             /*
             * // 1. 仅支持默认导出
             * import data from './data.json';
             * console.log(data.name); // 正常输出："Vite"
             * 
             * // 2. 具名导出会报错（Uncaught SyntaxError: The requested module './data.json' does not provide an export named 'name'）
             * import { name } from './data.json'; // 错误！
             * 
             * */
             stringify: true,
             /*
             * 若设置为 true，导入的 JSON 会被转换为 export default JSON.parse("...")，
             * 这样会比转译成对象字面量性能更好，尤其是当 JSON 文件较大的时候。
             * 如果设置为 'auto'，只有当 数据大于 10kB 时，才会对数据进行字符串化处理。
             * */
         }
     })

vite 插件开发

前置准备：vite-plugin-inspect 插件

vite-plugin-inspect 是 Vite 生态中的一个开发辅助插件，主要作用是可视化地查看 Vite 构建过程中的模块转换、插件执行流程和依赖关系，帮助开发者调试和理解 Vite 的内部工作机制。

Vite 为了将生态的扩充交给开发者，因此采用了插件化设计思想，定义了基础插件化协议，开发者可以根据协议开发自己的插件，以此来丰富 vite 生态。

Vite 插件的本质是函数，函数有返回值。

export default function viteHuaLuPlugin() {
    return {
        name: 'vite-hua-lu-plugin', // 插件名称
        
    }
}