Implementing Code Splitting and Lazy Loading in Vue Applications

{
  "title": "Implementing Code Splitting and Lazy Loading in Vue Applications",
  "description": "Techniques for optimizing Vue applications by splitting code into smaller chunks and loading them asynchronously to improve performance.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-code-splitting-lazy-loading",
      "description": "Ensure that Vue components and routes are configured for code splitting and lazy loading to enhance application performance.",
      "severity": "warning",
      "trigger": {
        "pattern": "import\\s+\\{\\s*defineAsyncComponent\\s*\\}\\s+from\\s+'vue'",
        "message": "Consider using 'defineAsyncComponent' for lazy loading components."
      },
      "actions": [
        {
          "type": "insert",
          "location": "after",
          "content": "\n\n// Example of lazy loading a component\nconst AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));"
        }
      ]
    },
    {
      "id": "vue-router-lazy-loading",
      "description": "Ensure that Vue Router routes are set up for lazy loading to improve application load times.",
      "severity": "warning",
      "trigger": {
        "pattern": "component:\\s*\\(\\)\\s*=>\\s*import\\(",
        "message": "Routes should use dynamic imports for lazy loading."
      },
      "actions": [
        {
          "type": "insert",
          "location": "after",
          "content": "\n\n// Example of lazy loading a route\nconst routes = [\n  {\n    path: '/about',\n    component: () => import('./views/About.vue')\n  }\n];"
        }
      ]
    }
  ]
}