feat: add cache

README.md

@@ -112,6 +112,17 @@ Replace default locale, you can find locale list [here](https://github.com/eleme
 
 e.g. `'zh-cn'`
 
+### cache
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to cache the element-plus components and directives.
+
+> [!WARNING]
+> If you enable this feature, you will get faster loading speed in development mode.
+> However, please note that this will make the `defaultLocale` ineffective in development mode.
+
 ### globalConfig
 
 - Type: `object`

src/core/cache.ts

@@ -0,0 +1,10 @@
+import { libraryName } from '../config'
+
+export function resolveCache () {
+  return {
+    filename: `${libraryName}-cache.mjs`,
+    getContents: () => {
+      return `export * from '${libraryName}';`
+    }
+  }
+}

src/core/components.ts

@@ -1,6 +1,6 @@
 import { addComponent } from '@nuxt/kit'
-import { iconLibraryName, libraryName } from '../config'
-import { genIconPresets, toArray, resolvePath, hyphenate } from '../utils'
+import { iconLibraryName } from '../config'
+import { genIconPresets, toArray, resolvePath, hyphenate, resolveComponentPath } from '../utils'
 import type { ModuleOptions } from '../types'
 
 export function getComponentPath (name: string): string {
@@ -9,7 +9,7 @@ export function getComponentPath (name: string): string {
 }
 
 export function resolveComponents (config: ModuleOptions) {
-  const { components, subComponents, icon } = config
+  const { components, subComponents, icon, cache } = config
   const icons = icon !== false ? genIconPresets(icon, iconLibraryName) : []
   const allComponents = new Set([...components, ...icons])
   const subComponentsMap = Object.fromEntries<string>(
@@ -25,13 +25,13 @@ export function resolveComponents (config: ModuleOptions) {
     const [name, alias, from] = toArray(item)
     const componentName = subComponentsMap[name] || name
     const filePath = from !== iconLibraryName
-      ? `${libraryName}/${getComponentPath(componentName)}`
-      : from
+      ? await resolveComponentPath(getComponentPath(componentName), cache)
+      : await resolvePath(from)
 
     addComponent({
       export: name,
       name: alias || name,
-      filePath: await resolvePath(filePath)
+      filePath
     })
   })
 }

src/core/directives.ts

@@ -1,4 +1,3 @@
-import { libraryName } from '../config'
 import { toArray } from '../utils'
 import type { ModuleOptions } from '../types'
 import { getComponentPath, getStyleDir } from './index'
@@ -15,5 +14,5 @@ export function resolveDirectives (
   const path = getComponentPath(styleName ?? directive)
   const style = styleName && getStyleDir(config, styleName)
 
-  return [directive, `${libraryName}/${path}`, style]
+  return [directive, path, style]
 }

src/core/imports.ts

@@ -1,25 +1,25 @@
 import { addImportsSources } from '@nuxt/kit'
 import { allMethods, iconLibraryName, libraryName } from '../config'
-import { genIconPresets, resolvePath, toArray } from '../utils'
+import { genIconPresets, resolveComponentPath, resolvePath, toArray } from '../utils'
 import type { ModuleOptions, PresetImport } from '../types'
 import { getComponentPath } from './index'
 
-function _resolveImports (imports: Set<PresetImport>) {
+function _resolveImports (imports: Set<PresetImport>, cache: boolean | undefined) {
   imports.forEach(async ([name, path]) => {
     addImportsSources({
-      from: await resolvePath(`${libraryName}/${path}`),
+      from: await resolveComponentPath(path, cache),
       imports: toArray(name)
     })
   })
 }
 
 export async function resolveImports (config: ModuleOptions) {
-  const { imports, icon } = config
+  const { imports, icon, cache } = config
   const icons = icon !== false ? genIconPresets(icon) : []
   const allImports = new Set(imports)
   const allIcons = new Set(icons)
 
-  _resolveImports(allImports)
+  _resolveImports(allImports, cache)
 
   addImportsSources({
     from: await resolvePath(iconLibraryName),
@@ -28,11 +28,11 @@ export async function resolveImports (config: ModuleOptions) {
 }
 
 export function resolveBaseImports (config: ModuleOptions) {
-  const { baseImports } = config
+  const { baseImports, cache } = config
   const methodImports = allMethods.map((name) => {
     return [name, getComponentPath(name)] as PresetImport
   })
   const allBaseImports = new Set([...baseImports, ...methodImports])
 
-  _resolveImports(allBaseImports)
+  _resolveImports(allBaseImports, cache)
 }

src/core/index.ts

@@ -1,3 +1,4 @@
+export * from './cache'
 export * from './components'
 export * from './directives'
 export * from './globalConfig'

src/core/options.ts

@@ -1,13 +1,19 @@
 import { useNuxt } from '@nuxt/kit'
 import { libraryName, optimizeDeps } from '../config'
+import type { ModuleOptions } from '../types'
 
-export function resolveOptions () {
+export function resolveOptions (config: ModuleOptions) {
   const nuxt = useNuxt()
 
   nuxt.options.build.transpile.push(libraryName)
   nuxt.options.vite.optimizeDeps ||= {}
   nuxt.options.vite.optimizeDeps.include ||= []
   nuxt.options.vite.optimizeDeps.include.push(...optimizeDeps)
-  nuxt.options.vite.optimizeDeps.exclude ||= []
-  nuxt.options.vite.optimizeDeps.exclude.push(libraryName)
+
+  if (config.cache) {
+    nuxt.options.vite.optimizeDeps.include.push(libraryName)
+  } else {
+    nuxt.options.vite.optimizeDeps.exclude ||= []
+    nuxt.options.vite.optimizeDeps.exclude.push(libraryName)
+  }
 }

src/core/transformPlugin.ts

@@ -12,6 +12,7 @@ import type { PresetComponent, TransformOptions } from '../types'
 
 interface PluginOptions extends TransformOptions {
   layers: string[]
+  cache: boolean | undefined
   sourcemap?: NuxtOptions['sourcemap']['client']
   transformStyles: (name: string) => undefined | string
   transformDirectives: (name: string) => undefined | [name: string, path: string, style?: string]
@@ -22,7 +23,7 @@ const directivesRegExp = /(?<=[ (])_?resolveDirective\(\s*["']([^'"]*?)["'][\s,]
 const methodsRegExp = toRegExp(allMethods, 'g')
 
 export const transformPlugin = createUnplugin((options: PluginOptions) => {
-  const { layers, include, exclude, sourcemap, transformStyles, transformDirectives } = options
+  const { cache, layers, include, exclude, sourcemap, transformStyles, transformDirectives } = options
 
   return {
     name: `${libraryName}:transform`,
@@ -78,7 +79,7 @@ export const transformPlugin = createUnplugin((options: PluginOptions) => {
         let imports: string = ''
 
         for (const directive of directives) {
-          imports += await genLibraryImport(directive)
+          imports += await genLibraryImport(directive, cache)
         }
 
         for (const style of styles) {

src/module.ts

@@ -1,6 +1,7 @@
-import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'
+import { addPluginTemplate, addTemplate, defineNuxtModule } from '@nuxt/kit'
 import { defaults, libraryName } from './config'
 import {
+  resolveCache,
   resolveComponents,
   resolveDirectives,
   resolveGlobalConfig,
@@ -31,12 +32,12 @@ export default defineNuxtModule<ModuleOptions>({
   setup (options, nuxt) {
     const layers = getLayersDir(nuxt.options._layers)
 
-    resolveOptions()
+    resolveOptions(options)
     resolveThemes(options)
     resolveBaseImports(options)
     nuxt.options.imports.autoImport !== false && resolveImports(options)
     nuxt.options.components !== false && resolveComponents(options)
-
+    options.cache && addTemplate(resolveCache())
     options.globalConfig && addPluginTemplate(resolveGlobalConfig(options))
 
     if (nuxt.options.ssr !== false) {
@@ -51,6 +52,7 @@ export default defineNuxtModule<ModuleOptions>({
       config.plugins = config.plugins || []
       config.plugins.push(transformPlugin.vite({
         layers,
+        cache: options.cache,
         include: options.include,
         exclude: options.exclude,
         sourcemap: nuxt.options.sourcemap[mode],
@@ -73,6 +75,7 @@ export default defineNuxtModule<ModuleOptions>({
         config.plugins = config.plugins || []
         config.plugins.push(transformPlugin.webpack({
           layers,
+          cache: options.cache,
           include: options.include,
           exclude: options.exclude,
           sourcemap: nuxt.options.sourcemap[mode],

src/types.ts

@@ -182,4 +182,12 @@ export interface ModuleOptions extends TransformOptions {
    * ```
    */
   installMethods: Array<'ElLoading' | 'ElMessage' | 'ElMessageBox' | 'ElNotification'>
+  /**
+   * Whether to cache the element-plus components and directives.
+   *
+   * If you enable this feature, you will get faster loading speed in development mode. However, please note that this will make the `defaultLocale` ineffective in development mode.
+   *
+   * @default 'false'
+   */
+  cache?: boolean
 }

src/utils.ts

@@ -1,14 +1,22 @@
 import type { Component } from 'vue'
 import { createResolver } from '@nuxt/kit'
 import type { NuxtConfigLayer } from '@nuxt/schema'
-import { allIcons } from './config'
+import { allIcons, libraryName } from './config'
 import type { PresetComponent } from './types'
 
 export function resolvePath (path: string): Promise<string> {
   const { resolvePath } = createResolver(import.meta.url)
   return resolvePath(path)
 }
 
+export async function resolveComponentPath (path: string, cache: boolean | undefined): Promise<string> {
+  if (cache) {
+    return `#build/${libraryName}-cache.mjs`
+  }
+
+  return await resolvePath(`${libraryName}/${path}`)
+}
+
 export function getLayersDir (layers: NuxtConfigLayer[]) {
   const list = []
 
@@ -40,8 +48,8 @@ export function toRegExp (arr: string[], flags?: string): RegExp {
   return new RegExp(`\\b(${arr.join('|')})\\b`, flags)
 }
 
-export async function genLibraryImport ([name, as, from]: Required<Exclude<PresetComponent, string>>): Promise<string> {
-  const fromPath = await resolvePath(from)
+export async function genLibraryImport ([name, as, from]: Required<Exclude<PresetComponent, string>>, cache: boolean | undefined): Promise<string> {
+  const fromPath = await resolveComponentPath(from, cache)
   return `import { ${name} as ${as} } from '${fromPath}';\n`
 }