How to Reduce the Number of Output Files in Remix Build to Improve First Load Performance?

[huangcong12]

Hi Remix team and community,

I'm developing a Shopify embedded app using Remix (with Vite), and I'm facing a significant performance issue related to first-time load speed.

---

🧩 Problem Description

After building the app, the output includes around 20+ small JS files, even for relatively simple pages. These files are mostly from manually split components and utility libraries (not routes), and result in many parallel HTTP requests when the app is first loaded. This leads to a noticeable white screen on slower connections and a poor first impression for new users — which is particularly problematic in an embedded Shopify context.

Even with Cloudflare CDN, the number of requests during the initial load still causes a significant delay.

---

🔧 What I've Tried

• manualChunks in Vite
  Attempted to merge libraries into a single vendor.js file using rollupOptions.output.manualChunks, but it doesn’t seem to effectively reduce the number of output chunks for my internal modules and components.

• Terser
  Helps reduce file size, but not file count.

• Custom Vite plugin attempts
  Tried rewriting dynamic imports and aggressively bundling specific chunks, but results were limited.

• Considered rewriting the app as a SPA entry point
  I explored the idea of bypassing the Remix routing system and rendering everything from a single entry point to reduce bundle fragmentation — but I couldn't get it to work due to the complexity and tight coupling with Remix's conventions.

---

⚙️ Build Config Example

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

---

❓My Questions

1. Is there a recommended way to reduce the number of small output files (especially from custom components and libraries) in Remix + Vite apps?
2. Can Remix be configured to bundle more aggressively, combining local modules into fewer files?
3. How are others improving first-load performance for production Remix apps, especially for embedded apps where user patience is very limited?

---

Thanks a lot for any insights or suggestions!