Implementing Lazy Loading for Vue Components

{
  "title": "Implementing Lazy Loading for Vue Components",
  "description": "Learn strategies for implementing lazy loading of components to optimize loading times and improve user experience.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-lazy-loading-define-async-component",
      "description": "Use `defineAsyncComponent` for lazy loading Vue components to improve performance by loading components only when needed.",
      "severity": "warning",
      "pattern": "import\\s+\\{\\s*defineAsyncComponent\\s*\\}\\s+from\\s+'vue';",
      "example": "import { defineAsyncComponent } from 'vue';\nconst MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));",
      "documentation": "https://vuejs.org/guide/best-practices/performance.html#code-splitting"
    },
    {
      "id": "vue-lazy-loading-dynamic-import",
      "description": "Use dynamic `import()` for lazy loading Vue components to reduce initial bundle size and improve load times.",
      "severity": "warning",
      "pattern": "const\\s+\\w+\\s*=\\s*\\(\\)\\s*=>\\s*import\\s*\\(.*\\);",
      "example": "const MyComponent = () => import('./MyComponent.vue');",
      "documentation": "https://vuejs.org/guide/best-practices/performance.html#code-splitting"
    },
    {
      "id": "vue-lazy-loading-v-if",
      "description": "Use `v-if` instead of `v-show` with lazy-loaded components to ensure they are loaded only when needed.",
      "severity": "warning",
      "pattern": "<\\w+\\s+v-show=",
      "example": "<MyComponent v-if=\"isVisible\" />",
      "documentation": "https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/"
    },
    {
      "id": "vue-lazy-loading-webpack-chunk-name",
      "description": "Use Webpack's `/* webpackChunkName: \"name\" */` comment to assign chunk names for better debugging and cache management.",
      "severity": "info",
      "pattern": "import\\s*\\(\\/\\*\\s*webpackChunkName:\\s*['\"]\\w+['\"]\\s*\\*\\/.*\\);",
      "example": "const MyComponent = () => import(/* webpackChunkName: \"my-component\" */ './MyComponent.vue');",
      "documentation": "https://moldstud.com/articles/p-best-practices-for-lazy-loading-in-vuetifyjs-a-comprehensive-performance-guide"
    },
    {
      "id": "vue-lazy-loading-prefetch",
      "description": "Use Webpack's `/* webpackPrefetch: true */` comment to prefetch components that are likely to be needed soon.",
      "severity": "info",
      "pattern": "import\\s*\\(\\/\\*\\s*webpackPrefetch:\\s*true\\s*\\*\\/.*\\);",
      "example": "const MyComponent = () => import(/* webpackPrefetch: true */ './MyComponent.vue');",
      "documentation": "https://moldstud.com/articles/p-best-practices-for-lazy-loading-in-vuetifyjs-a-comprehensive-performance-guide"
    }
  ]
}