fix(react): don't generate preload tags for inlined assets

Author: galvez

packages/fastify-react/plugin/index.js

@@ -12,7 +12,7 @@ import { closeBundle } from './preload.js'
 import { parseStateKeys } from './parsers.js'
 import { generateStores } from './stores.js'
 
-export default function viteFastifyVue () {
+export default function viteFastifyReactPlugin () {
   const context = {
     root: null,
   }
@@ -23,6 +23,15 @@ export default function viteFastifyVue () {
     config,
     configResolved: configResolved.bind(context),
     resolveId: resolveId.bind(context),
+    configEnvironment (name, config, { mode }) {
+      if (mode === 'production') {
+        config.build.minify = true
+        config.build.sourcemap = false
+      }
+      if (name === 'ssr') {
+        config.build.manifest = false
+      }
+    },
     async load (id) {
       if (id.includes('?server') && !this.environment.config.build?.ssr) {
         const source = loadSource(id)
@@ -51,9 +60,8 @@ export default function viteFastifyVue () {
       order: 'post',
       handler: transformIndexHtml.bind(context)
     },
-    closeBundle: {
-      order: 'post',
-      handler: closeBundle.bind(context),
+    closeBundle () {
+      closeBundle.call(this, context.resolvedBundle)
     },
   }]
 }

packages/fastify-react/plugin/preload.js

@@ -2,46 +2,51 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs'
 import { join, parse as parsePath } from 'node:path'
 import { HTMLRewriter } from 'html-rewriter-wasm'
 
-const imageFile = /\.((png)|(jpg)|(svg)|(webp)|(gif))$/
+const imageFileRE = /\.((png)|(jpg)|(svg)|(webp)|(gif))$/
 
-export async function closeBundle() {
-  if (!this.resolvedConfig.build.ssr) {
-    const distDir = join(this.root, this.resolvedConfig.build.outDir)
-    const indexHtml = readFileSync(join(distDir, 'index.html'), 'utf8')
-    const pages = Object.fromEntries(
-      Object.entries(this.resolvedBundle ?? {})
-        .filter(([id, meta]) => {
-          if (meta.facadeModuleId?.includes('/pages/')) {
-            meta.htmlPath = meta.facadeModuleId.replace(/.*pages\/(.*)\.jsx$/, 'html/$1.html')
-            return true
-          }
-        })
-    )
-    for (const page of Object.values(pages)) {
-      const jsImports = page.imports
-      const cssImports = page.viteMetadata.importedCss
-      const images = page.moduleIds.filter(_ => imageFile.test(_))
-      let imagePreloads = '\n'
-      for (let image of images) {
-        image = image.slice(this.root.length + 1)
-        imagePreloads += `  <link rel="preload" as="image" crossorigin href="${this.resolvedConfig.base}${image}">\n`
-      }
-      let cssPreloads = ''
-      for (const css of cssImports) {
-        cssPreloads += `  <link rel="preload" as="style" crossorigin href="${this.resolvedConfig.base}${css}">\n`
-      }
-      let jsPreloads = ''
-      for (const js of jsImports) {
-        jsPreloads += `  <link rel="modulepreload" crossorigin href="${this.resolvedConfig.base}${js}">\n`
-      }
-      const pageHtml = await appendHead(
-        indexHtml,
-        imagePreloads,
-        cssPreloads,
-        jsPreloads
-      )
-      writeHtml(page, pageHtml, distDir)
+export async function closeBundle(resolvedBundle) {
+  if (this.environment.name !== 'client') {
+    return
+  }
+  const { assetsInlineLimit } = this.environment.config.build
+  const { root, base } = this.environment.config
+  const distDir = join(root, this.environment.config.build.outDir)
+  const indexHtml = readFileSync(join(distDir, 'index.html'), 'utf8')
+  const pages = Object.fromEntries(
+    Object.entries(resolvedBundle ?? {})
+      .filter(([id, meta]) => {
+        if (meta.facadeModuleId?.includes('/pages/')) {
+          meta.htmlPath = meta.facadeModuleId.replace(/.*pages\/(.*)\.jsx$/, 'html/$1.html')
+          return true
+        }
+      })
+  )
+  for (const page of Object.values(pages)) {
+    const jsImports = page.imports
+    const cssImports = page.viteMetadata.importedCss
+    const images = page.moduleIds.filter((img) => {
+      return (page.modules[img].originalLength > assetsInlineLimit) && imageFileRE.test(img)
+    })
+    let imagePreloads = '\n'
+    for (let image of images) {
+      image = image.slice(root.length + 1)
+      imagePreloads += `  <link rel="preload" as="image" crossorigin href="${base}${image}">\n`
+    }
+    let cssPreloads = ''
+    for (const css of cssImports) {
+      cssPreloads += `  <link rel="preload" as="style" crossorigin href="${base}${css}">\n`
     }
+    let jsPreloads = ''
+    for (const js of jsImports) {
+      jsPreloads += `  <link rel="modulepreload" crossorigin href="${base}${js}">\n`
+    }
+    const pageHtml = await appendHead(
+      indexHtml,
+      imagePreloads,
+      cssPreloads,
+      jsPreloads
+    )
+    writeHtml(page, pageHtml, distDir)
   }
 }