feat: support webpack magic comments (#197)

README.md

@@ -104,6 +104,8 @@ export default {
 </script>
 ```
 
+If you want to prefetch or preload the components with `Lazy` prefix, you can configure it by [prefetch/preload options](#prefetch/preload).
+
 ### Nested Components
 
 If you have components in nested directories:
@@ -304,6 +306,31 @@ export default {
 
 Components having the same name in `~/components` will overwrite the one in `my-theme/components`, learn more in [Overwriting Components](#overwriting-components). The lowest value will overwrite.
 
+#### prefetch/preload
+
+- Type: `Boolean/Number`
+- Default: `false`
+
+These properties are used in production to configure how [components with `Lazy` prefix](#Lazy-Imports) are handled by Wepack via its magic comments, learn more in [Wepack's official documentation](https://webpack.js.org/api/module-methods/#magic-comments).
+
+```js
+export default {
+  components: [
+   { path: 'my-theme/components', prefetch: true }
+  ]
+}
+```
+
+yields:
+
+```js
+// plugin.js
+const componets = {
+  MyComponentA: import(/* webpackPrefetch: true */ ...),
+  MyComponentB: import(/* webpackPrefetch: true */ ...)
+}
+```
+
 ## Migration guide
 
 ## `v1` to `v2`

src/scan.ts

@@ -17,7 +17,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise<
   const filePaths = new Set<string>()
   const scannedPaths: string[] = []
 
-  for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level } of dirs.sort(sortDirsByPathLength)) {
+  for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false } of dirs.sort(sortDirsByPathLength)) {
     const resolvedNames = new Map<string, string>()
 
     for (const _file of await globby(pattern!, { cwd: path, ignore })) {
@@ -76,7 +76,9 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise<
         asyncImport: '',
         export: 'default',
         global: Boolean(global),
-        level: Number(level)
+        level: Number(level),
+        prefetch: Boolean(prefetch),
+        preload: Boolean(preload)
       }
 
       if (typeof extendComponent === 'function') {

src/types.ts

@@ -11,6 +11,8 @@ export interface Component {
   /** @deprecated */
   global: boolean
   level: number
+  prefetch: boolean
+  preload: boolean
 }
 
 export interface ScanDir {
@@ -22,6 +24,8 @@ export interface ScanDir {
   global?: boolean | 'dev'
   pathPrefix?: boolean
   level?: number
+  prefetch: boolean
+  preload: boolean
   extendComponent?: (component: Component) => Promise<Component | void> | (Component | void)
 }
 

templates/components/plugin.js

@@ -6,7 +6,13 @@ import { wrapFunctional } from './utils'
 const components = {
 <%= components.map(c => {
   const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']`
-  return `  ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))`
+  const magicComments = [
+    `webpackChunkName: "${c.chunkName}"`,
+    c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false,
+    c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false,
+  ].filter(Boolean).join(', ')
+
+  return `  ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))`
 }).join(',\n') %>
 }