perf: optimize path matches

pengzhanbo · Jan 12, 2023 · 7ee6fed · 7ee6fed
1 parent 56da840
commit 7ee6fed
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/src/pathRules.ts b/src/pathRules.ts
@@ -1,3 +1,7 @@
+import { pathToRegexp } from 'path-to-regexp'
+
+export type FindPathRule = (pathname: string) => string | undefined
+
 export function generatePathRules(prefix: string) {
   return [
     '/bg/:background/text/:text/:width?/:height?{.:type}?',
@@ -7,3 +11,11 @@ export function generatePathRules(prefix: string) {
     '/:width?/:height?{.:type}?',
   ].map((_) => `${prefix}${_}`)
 }
+
+export function createPathRuleMatch(prefix: string): FindPathRule {
+  const rules = generatePathRules(prefix).map((rule) => ({
+    regexp: pathToRegexp(rule),
+    rule,
+  }))
+  return (pathname) => rules.find(({ regexp }) => regexp.test(pathname))?.rule
+}
diff --git a/src/pathToImage.ts b/src/pathToImage.ts
@@ -1,9 +1,10 @@
 import { parse as urlParse } from 'node:url'
-import { match, pathToRegexp } from 'path-to-regexp'
+import { match } from 'path-to-regexp'
 import type { Create, CreateText } from 'sharp'
 import sharp from 'sharp'
 import { bufferCache } from './cache'
 import { DEFAULT_PARAMS } from './constants'
+import type { FindPathRule } from './pathRules'
 import type {
   ImageCacheItem,
   ImagePlaceholderOptions,
@@ -19,17 +20,15 @@ export type TextOptions = CreateText
 
 export async function pathToImage(
   url: string,
-  rules: string[],
+  findPathRule: FindPathRule,
   options: Required<ImagePlaceholderOptions>,
 ): Promise<ImageCacheItem | undefined> {
   if (bufferCache.has(url)) {
     return bufferCache.get(url)
   }
   const { query: urlQuery, pathname } = urlParse(url, true)
 
-  const rule = rules.find((rule) => {
-    return pathToRegexp(rule).test(pathname!)
-  })
+  const rule = findPathRule(pathname!)
 
   if (!rule) return
   const urlMatch = match(rule, { decode: decodeURIComponent })(pathname!) || {

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -4,7 +4,8 @@ import { isCSSRequest } from 'vite'
 import { bufferToFile } from './bufferToFile'
 import { contentCache } from './cache'
 import { DEFAULT_PREFIX } from './constants'
-import { generatePathRules } from './pathRules'
+import type { FindPathRule } from './pathRules'
+import { createPathRuleMatch } from './pathRules'
 import { pathToImage } from './pathToImage'
 import type {
   ImageCacheItem,
@@ -63,7 +64,7 @@ function placeholderServerPlugin(
   options: ImagePlaceholderOptions = {},
 ): Plugin {
   const opts = parseOptions(options)
-  const pathRules = generatePathRules(opts.prefix)
+  const findPathRule = createPathRuleMatch(opts.prefix)
 
   return {
     name: 'vite-plugin-image-placeholder-server',
@@ -73,7 +74,7 @@ function placeholderServerPlugin(
         const url = req.url!
         if (!url.startsWith(opts.prefix)) return next()
 
-        const image = await pathToImage(url, pathRules, opts)
+        const image = await pathToImage(url, findPathRule, opts)
 
         if (!image) return next()
 
@@ -89,7 +90,7 @@ function placeholderImporterPlugin(
   options: ImagePlaceholderOptions = {},
 ): Plugin {
   const opts = parseOptions(options)
-  const pathRules = generatePathRules(opts.prefix)
+  const findPathRule = createPathRuleMatch(opts.prefix)
   const RE_VIRTUAL = /^\0virtual:\s*/
   const moduleId = `virtual:${opts.prefix.slice(1)}`
   const resolveVirtualModuleId = `\0${moduleId}`
@@ -112,7 +113,7 @@ function placeholderImporterPlugin(
         if (contentCache.has(url)) {
           return `export default '${contentCache.get(url)!}'`
         }
-        const image = await pathToImage(url, pathRules, opts)
+        const image = await pathToImage(url, findPathRule, opts)
         if (image) {
           let content: string
           if (
@@ -143,7 +144,7 @@ function placeholderTransformPlugin(
   options: ImagePlaceholderOptions = {},
 ): Plugin {
   const opts = parseOptions(options)
-  const pathRules = generatePathRules(opts.prefix)
+  const findPathRule = createPathRuleMatch(opts.prefix)
   const moduleId = `virtual:${opts.prefix.slice(1)}`
   const resolveVirtualModuleId = `\0${moduleId}`
   const s = `(${opts.prefix}.*?)`
@@ -183,7 +184,7 @@ function placeholderTransformPlugin(
         ctx,
         code,
         RE_PATTERN,
-        pathRules,
+        findPathRule,
         opts,
         config,
       )
@@ -197,7 +198,7 @@ function placeholderTransformPlugin(
         ctx,
         html,
         RE_PATTERN,
-        pathRules,
+        findPathRule,
         opts,
         config,
       )
@@ -211,7 +212,7 @@ async function transformPlaceholder(
   ctx: PluginContext,
   code: string,
   pattern: RegExp,
-  rules: string[],
+  findPathRule: FindPathRule,
   opts: Required<ImagePlaceholderOptions>,
   config: ResolvedConfig,
 ) {
@@ -228,13 +229,14 @@ async function transformPlaceholder(
       hasReplaced = true
       s.update(start, end, `${dynamic[0]}${contentCache.get(url)}${dynamic[1]}`)
     } else {
-      const image = await pathToImage(url, rules, opts)
+      const image = await pathToImage(url, findPathRule, opts)
       if (image) {
         hasReplaced = true
         let content: string
         if (
           opts.output &&
-          image.buffer.byteLength >= config.build.assetsInlineLimit
+          image.buffer.byteLength >= config.build.assetsInlineLimit &&
+          config.command === 'build'
         ) {
           const { assetsDir, filename } = parseOutput(opts.output, config)
           content = await bufferToFile(