Leveraging Vite 6 for Efficient Build Processes in Vue Projects

{
  "title": "Leveraging Vite 6 for Efficient Build Processes in Vue Projects",
  "description": "Techniques for utilizing Vite 6's Environment API and Rolldown integration to achieve faster build times and better memory efficiency.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "name": "Use Vite 6 Environment API for Build Optimization",
      "description": "Implement Vite 6's Environment API to manage different build environments effectively, ensuring optimal performance and resource utilization.",
      "applyTo": "vite.config.js",
      "pattern": "import { defineConfig } from 'vite';",
      "replacement": "import { defineConfig, loadEnv } from 'vite';",
      "example": {
        "before": "import { defineConfig } from 'vite';",
        "after": "import { defineConfig, loadEnv } from 'vite';"
      }
    },
    {
      "name": "Configure Rolldown for Efficient Bundling",
      "description": "Integrate Rolldown with Vite 6 to enhance bundling efficiency, reducing build times and improving memory usage.",
      "applyTo": "vite.config.js",
      "pattern": "export default defineConfig({",
      "replacement": "import rolldown from 'vite-plugin-rolldown';\n\nexport default defineConfig({\n  plugins: [rolldown()],",
      "example": {
        "before": "export default defineConfig({",
        "after": "import rolldown from 'vite-plugin-rolldown';\n\nexport default defineConfig({\n  plugins: [rolldown()],"
      }
    },
    {
      "name": "Set Up Environment Variables for Different Modes",
      "description": "Utilize Vite 6's Environment API to define and load environment variables for development, staging, and production modes.",
      "applyTo": "vite.config.js",
      "pattern": "export default defineConfig({",
      "replacement": "const env = loadEnv(mode, process.cwd());\n\nexport default defineConfig({\n  define: {\n    'process.env': env\n  },",
      "example": {
        "before": "export default defineConfig({",
        "after": "const env = loadEnv(mode, process.cwd());\n\nexport default defineConfig({\n  define: {\n    'process.env': env\n  },"
      }
    },
    {
      "name": "Optimize Build Performance with Rollup Options",
      "description": "Configure Rollup options within Vite 6 to optimize build performance, including code splitting and tree shaking.",
      "applyTo": "vite.config.js",
      "pattern": "export default defineConfig({",
      "replacement": "export default defineConfig({\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: (id) => {\n          if (id.includes('node_modules')) {\n            return 'vendor';\n          }\n        }\n      }\n    }\n  },",
      "example": {
        "before": "export default defineConfig({",
        "after": "export default defineConfig({\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: (id) => {\n          if (id.includes('node_modules')) {\n            return 'vendor';\n          }\n        }\n      }\n    }\n  },"
      }
    },
    {
      "name": "Enable Source Maps for Easier Debugging",
      "description": "Configure Vite 6 to generate source maps during development for easier debugging of Vue components.",
      "applyTo": "vite.config.js",
      "pattern": "export default defineConfig({",
      "replacement": "export default defineConfig({\n  build: {\n    sourcemap: true,\n  },",
      "example": {
        "before": "export default defineConfig({",
        "after": "export default defineConfig({\n  build: {\n    sourcemap: true,\n  },"
      }
    }
  ]
}