feat(vite): 新增读取构建插件

packages/vite/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.7.2",
+	"version": "0.8.0",
 	"name": "vite-plugin-font",
 	"description": "auto CJK font subset for Vite and Nuxt",
 	"main": "./dist/vite.js",
@@ -47,7 +47,8 @@
 		"vite": "^5"
 	},
 	"dependencies": {
-		"@konghayao/cn-font-split": "workspace:^"
+		"@konghayao/cn-font-split": "workspace:^",
+		"glob": "^10.4.1"
 	},
 	"bugs": {
 		"url": "https://github.com/KonghaYao/cn-font-split/issues"

packages/vite/src/font.d.ts

@@ -1,14 +1,20 @@
-
 declare module '@konghayao/_font_' {
     import { fontSplit } from '@konghayao/cn-font-split';
     type Reporter = Awaited<ReturnType<typeof fontSplit>>;
     export const css: Reporter['css'];
 }
 
 declare module '*.ttf' {
-    export * from '@konghayao/_font_'
+    export * from '@konghayao/_font_';
 }
 
 declare module '*.otf' {
-    export * from '@konghayao/_font_'
-}
+    export * from '@konghayao/_font_';
+}
+declare module '*.ttf?subsets' {
+    export * from '@konghayao/_font_';
+}
+
+declare module '*.otf?subsets' {
+    export * from '@konghayao/_font_';
+}

packages/vite/src/index.ts

@@ -1,20 +1,36 @@
-import { InputTemplate, fontSplit } from '@konghayao/cn-font-split';
+import { InputTemplate, Subsets, fontSplit } from '@konghayao/cn-font-split';
 import path from 'path';
 import fs from 'fs';
 
 function getFileName(id: string) {
     return path.basename(id).replace(/\./g, '_');
 }
+function chunk(arr?: number[], size = 500) {
+    if (arr) {
+        let result = [];
+        for (let i = 0; i < arr.length; i += size) {
+            result.push(arr.slice(i, i + size));
+        }
+
+        return result;
+    } else {
+        return;
+    }
+}
+
+export type BundlePluginConfig = Partial<
+    InputTemplate & {
+        cacheDir?: string;
+        server?: boolean;
+    }
+>;
 
 export class BundlePlugin {
     constructor(
-        public config: Partial<
-            InputTemplate & {
-                cacheDir?: string;
-                server?: boolean;
-            }
-        > = {},
-    ) { }
+        public config: BundlePluginConfig = {},
+        public subsets: number[][] | undefined = undefined,
+    ) {}
+
     getResolvedPath(p: string) {
         return path.resolve(this.config.cacheDir!, getFileName(p));
     }
@@ -39,9 +55,9 @@ export class BundlePlugin {
         let stat: boolean;
         try {
             await fs.promises.access(resolvedPath);
-            stat = true
+            stat = true;
         } catch (e) {
-            stat = false
+            stat = false;
         }
         if (!stat && this.config.server !== false) {
             console.log('vite-plugin-font | font pre-building');
@@ -50,7 +66,9 @@ export class BundlePlugin {
                 FontPath: p,
                 destFold: resolvedPath,
                 reporter: true,
-                log() { },
+                autoChunk: !this.subsets,
+                subsets: chunk(this.subsets?.flat()),
+                log() {},
             }).catch((e) => {
                 console.error(e);
             });

packages/vite/src/subset/SubsetBundlePlugin.ts

@@ -0,0 +1,65 @@
+import { BundlePlugin, BundlePluginConfig } from '../index.js';
+import { glob } from 'glob';
+import fs from 'fs';
+import crypto from 'node:crypto';
+export interface SubsetBundlePluginConfig extends BundlePluginConfig {
+    scanFiles: string | string[];
+    ignore?: string | string[];
+    whiteList?: string | string[];
+}
+export class SubsetBundlePlugin extends BundlePlugin {
+    subsetConfig: SubsetBundlePluginConfig;
+    constructor(config: SubsetBundlePluginConfig) {
+        super(config);
+        this.subsetConfig = config;
+    }
+
+    usedSubsets = new Set<number>();
+    async createSubsets() {
+        this.getWhiteListSubsets();
+        await this.getScanFiles();
+        const subsetsArr = [...this.usedSubsets].sort((a, b) => a - b);
+        this.subsets = [subsetsArr];
+        return crypto
+            .createHash('md5')
+            .update(String.fromCharCode(...subsetsArr))
+            .digest('hex');
+    }
+    async getScanFiles() {
+        const files = await glob(this.subsetConfig.scanFiles, {
+            absolute: true,
+            nodir: true,
+            ignore: this.subsetConfig.ignore ?? ['node_modules/**'],
+        });
+        return Promise.all(
+            files.map((i) => {
+                return new Promise((res, rej) => {
+                    const stream = fs.createReadStream(i, {
+                        encoding: 'utf8',
+                    });
+                    stream.on('data', (i: string) => {
+                        i.split('').forEach((char) =>
+                            this.usedSubsets.add(char.charCodeAt(0)),
+                        );
+                    });
+                    stream.on('end', () => {
+                        res(null);
+                    });
+                    stream.on('error', (err) => {
+                        rej(err);
+                    });
+                });
+            }),
+        );
+    }
+    getWhiteListSubsets() {
+        let whiteList = this.subsetConfig.whiteList ?? [];
+        if (!(whiteList instanceof Array)) {
+            whiteList = [whiteList];
+        }
+        const set = this.usedSubsets;
+        whiteList.forEach((str) =>
+            str.split('').forEach((char) => set.add(char.charCodeAt(0))),
+        );
+    }
+}

packages/vite/src/subset/vite.ts

@@ -0,0 +1,32 @@
+import type { Plugin } from 'vite';
+import path from 'path';
+
+import {
+    SubsetBundlePlugin,
+    SubsetBundlePluginConfig,
+} from './SubsetBundlePlugin.js';
+export default function split(config: SubsetBundlePluginConfig): Plugin {
+    const plugin = new SubsetBundlePlugin(config);
+    return <Plugin>{
+        name: 'vite-plugin-font-subsets',
+        enforce: 'pre',
+
+        async configResolved(c) {
+            const hash = await plugin.createSubsets();
+            plugin.config.cacheDir = path.resolve(
+                config.cacheDir ?? path.resolve(c.cacheDir, './.font/'),
+                hash,
+            );
+            console.log(
+                'vite-plugin-font | cache dir | ' + plugin.config.cacheDir,
+            );
+        },
+        async load(id, options) {
+            if (['.otf?subsets', '.ttf?subsets'].some((i) => id.endsWith(i))) {
+                id = id.split('?')[0];
+                await plugin.createBundle(id);
+                return plugin.createSourceCode(id);
+            }
+        },
+    };
+}

packages/vite/src/vite.ts

@@ -19,7 +19,7 @@ export default function split(
             plugin.config.cacheDir =
                 config.cacheDir ?? path.resolve(c.cacheDir, './.font/');
             console.log(
-                'cn-font-split | 字体构建缓存地址 | ' + plugin.config.cacheDir,
+                'vite-plugin-font | cache dir | ' + plugin.config.cacheDir,
             );
         },
         async load(id, options) {

packages/vite/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
-import Plugin from './dist/vite.js';
+import Plugin from './src/vite';
 export default defineConfig({
-    plugins: [Plugin()],
+    plugins: [Plugin({})],
     build: {
         outDir: 'build',
     },