feat: Async components with Lazy prefix

Add support for lazy loading components, this is useful for performance optimisations.

Author: harlan-zw

README.md

@@ -51,6 +51,22 @@ Use them in any `.vue` as you would normally. Access your components with either
 Remove `imports` and `components` from the `script` section.
 
 
+### Async Component Loading
+
+You can load your components async by prefixing your component name with `Lazy` or `lazy-`, depending on your
+syntax. 
+
+```html
+<template>
+<div>
+  <!-- ComponentFoo will be loaded in async -->
+  <LazyComponentFoo />
+  <!-- ComponentBar will be loaded sync -->
+  <ComponentBar />
+</div>
+</template>
+```
+
 ## Configuration
 
 You can change the behaviour of the plugin by modifying the options in `./vue.config.js`. 

examples/vue2/src/App.vue

@@ -111,22 +111,25 @@
             <v-btn>Test</v-btn>
           </td>
         </tr>
+        <tr>
+          <td>
+            <code>Lazy Component</code>
+          </td>
+          <td>
+            <lazy-lazy-component>Test</lazy-lazy-component>
+          </td>
+        </tr>
       </table>
     </v-main>
   </v-app>
 </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld';
 
 export default {
   name: 'App',
 
-  components: {
-    HelloWorld,
-  },
-
   data: () => ({
     //
   }),

examples/vue2/src/components/LazyComponent.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+  I should be lazy ✅
+</div>
+</template>

examples/vue3/src/App.vue

@@ -78,10 +78,17 @@
         </ValidationObserver>
       </td>
     </tr>
+    <tr>
+      <td>
+        <code>Lazy Component</code>
+      </td>
+      <td>
+        <lazy-lazy-component>Test</lazy-lazy-component>
+      </td>
+    </tr>
 
   </table>
 </template>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

examples/vue3/src/ui/LazyComponent.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+  I should be lazy ✅
+</div>
+</template>

src/loader.ts

@@ -25,8 +25,24 @@ export default async function loader(this: webpackLoader.LoaderContext, source:
   // make sure cache invalidation and recompile in watch mode
   scannedComponents.forEach(c => this.addDependency(c.filePath))
 
+  const generateLazyLoadImport = (c: Component) => {
+    if (options.vueVersion === 3)
+      return `Lazy${c.pascalName}: defineAsyncComponent(() => import('${c.shortPath.replace(';', '')}'))`
+
+    return `Lazy${c.pascalName}: () => import('${c.shortPath.replace(';', '')}')`
+  }
+
+  const componentsWithLazyImports = scannedComponents.map(c => [c, {
+    ...c,
+    pascalName: `Lazy${c.pascalName}`,
+    import: generateLazyLoadImport(c),
+    kebabName: `lazy-${c.kebabName}`,
+    lazy: true,
+  } as Component])
+    .flat()
+
   // the components to import
-  const components: Component[] = matcher(tags, scannedComponents)
+  const components: Component[] = matcher(tags, componentsWithLazyImports)
 
   // only if we have components to inject
   if (components.length <= 0)

src/types.ts

@@ -6,6 +6,7 @@ export interface Component {
   import: string
   filePath: string
   shortPath: string
+  lazy: boolean | undefined
 }
 
 export enum Extensions {

src/vue2/injectComponents.ts

@@ -10,8 +10,8 @@ export default function injectComponents(this: webpackLoader.LoaderContext, sour
   const injectScript
     = `/* vue-cli-plugin-import-components */
 ${installComponentRuntime}
-${components.map(c => c.import).join('\n')}
-vueCliInstallComponent(component, {${components.map(c => c.pascalName).join(', ')}});`
+${components.filter(c => !c.lazy).map(c => c.import).join('\n')}
+vueCliInstallComponent(component, {${components.map(c => c.lazy ? c.import : c.pascalName).join(', ')}});`
 
   const hotReload = source.indexOf('/* hot reload */')
   if (hotReload > -1)

src/vue3/injectComponents.ts

@@ -1,13 +1,15 @@
 import { Component } from '../types'
 
 function injectImports(variable: string, components: Component[]) {
-  return `${variable}.components = Object.assign({}, { ${components.map(c => c.pascalName).join(', ')} }, ${variable}.components);`
+  return `${variable}.components = Object.assign({}, { ${components.map(c => c.lazy ? c.import : c.pascalName).join(', ')} }, ${variable}.components);`
 }
 
 export default function injectComponents(source: string, components: Component[]) {
+  const lazyCode = !source.includes('defineAsyncComponent') && components.filter(c => c.lazy).length > 0 ? 'import { defineAsyncComponent } from \'vue\'' : ''
+
   let newContent
-    = `/* vue-cli-plugin-import-components */\n${
-      components.map(c => c.import).join('\n')}\n${
+    = `/* vue-cli-plugin-import-components */\n${lazyCode}\n${
+      components.filter(c => !c.lazy).map(c => c.import).join('\n')}\n${
       injectImports('script', components)}`
 
   // script.options is used by vue-property-decorator