From 192205596569fcb013a97a70128c78011b49ace1 Mon Sep 17 00:00:00 2001 From: tolking Date: Sun, 29 Jun 2025 17:46:28 +0800 Subject: [PATCH] feat: add cache --- README.md | 11 +++++++++++ src/core/cache.ts | 10 ++++++++++ src/core/components.ts | 12 ++++++------ src/core/directives.ts | 3 +-- src/core/imports.ts | 14 +++++++------- src/core/index.ts | 1 + src/core/options.ts | 12 +++++++++--- src/core/transformPlugin.ts | 5 +++-- src/module.ts | 9 ++++++--- src/types.ts | 8 ++++++++ src/utils.ts | 14 +++++++++++--- 11 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 src/core/cache.ts diff --git a/README.md b/README.md index a2fa3fd..22b3778 100644 --- a/README.md +++ b/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` diff --git a/src/core/cache.ts b/src/core/cache.ts new file mode 100644 index 0000000..0dde8f5 --- /dev/null +++ b/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}';` + } + } +} diff --git a/src/core/components.ts b/src/core/components.ts index a8bf74d..2deaa9c 100644 --- a/src/core/components.ts +++ b/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( @@ -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 }) }) } diff --git a/src/core/directives.ts b/src/core/directives.ts index c6d7221..5c2e264 100644 --- a/src/core/directives.ts +++ b/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] } diff --git a/src/core/imports.ts b/src/core/imports.ts index edd5f17..feaad69 100644 --- a/src/core/imports.ts +++ b/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) { +function _resolveImports (imports: Set, 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) } diff --git a/src/core/index.ts b/src/core/index.ts index 4d4b535..636421d 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -1,3 +1,4 @@ +export * from './cache' export * from './components' export * from './directives' export * from './globalConfig' diff --git a/src/core/options.ts b/src/core/options.ts index 0a0e64e..cc24383 100644 --- a/src/core/options.ts +++ b/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) + } } diff --git a/src/core/transformPlugin.ts b/src/core/transformPlugin.ts index 03a22af..1c6461e 100644 --- a/src/core/transformPlugin.ts +++ b/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) { diff --git a/src/module.ts b/src/module.ts index dbf8e15..94e26a1 100644 --- a/src/module.ts +++ b/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({ 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({ 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({ config.plugins = config.plugins || [] config.plugins.push(transformPlugin.webpack({ layers, + cache: options.cache, include: options.include, exclude: options.exclude, sourcemap: nuxt.options.sourcemap[mode], diff --git a/src/types.ts b/src/types.ts index 460590a..598c7cf 100644 --- a/src/types.ts +++ b/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 } diff --git a/src/utils.ts b/src/utils.ts index 6dabd58..e25c2fc 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,7 +1,7 @@ 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 { @@ -9,6 +9,14 @@ export function resolvePath (path: string): Promise { return resolvePath(path) } +export async function resolveComponentPath (path: string, cache: boolean | undefined): Promise { + 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>): Promise { - const fromPath = await resolvePath(from) +export async function genLibraryImport ([name, as, from]: Required>, cache: boolean | undefined): Promise { + const fromPath = await resolveComponentPath(from, cache) return `import { ${name} as ${as} } from '${fromPath}';\n` }