Merge pull request #7982 from maiieul/fix-manualChunks-merging

fix: over-preloading due to inaccurate bundle-graph static import graph

Author: wmertens

.changeset/clean-bears-cough.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': minor
+---
+
+FIX: Qwik now leverages Rollup's new `output.onlyExplicitManualChunks` feature, which improves preloading performance and reduces cache invalidation for a snappier user experience.

package.json

@@ -149,7 +149,7 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "pretty-quick": "4.2.2",
     "prompts": "2.4.2",
-    "rollup": ">= 4.39.0",
+    "rollup": ">= 4.52.0",
     "semver": "7.7.2",
     "simple-git-hooks": "2.13.1",
     "snoop": "1.0.4",

packages/qwik/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "csstype": "^3.1.3",
     "launch-editor": "^2.11.1",
-    "rollup": ">= ^4.39.0"
+    "rollup": ">= ^4.52.0"
   },
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",

packages/qwik/src/optimizer/src/plugins/rollup.ts

@@ -1,5 +1,4 @@
 import type { Rollup } from 'vite';
-
 import type {
   Diagnostic,
   EntryStrategy,
@@ -18,6 +17,7 @@ import {
   type QwikPlugin,
   type QwikPluginOptions,
 } from './plugin';
+import { findDepPkgJsonPath } from './utils';
 
 type QwikRollupPluginApi = {
   getOptimizer: () => Optimizer;
@@ -76,7 +76,7 @@ export function qwikRollup(qwikRollupOpts: QwikRollupPluginOptions = {}): any {
     },
 
     outputOptions(rollupOutputOpts) {
-      return normalizeRollupOutputOptionsObject(qwikPlugin, rollupOutputOpts, false);
+      return normalizeRollupOutputOptionsObject(qwikPlugin, rollupOutputOpts, false) as any;
     },
 
     async buildStart() {
@@ -127,35 +127,37 @@ export function qwikRollup(qwikRollupOpts: QwikRollupPluginOptions = {}): any {
   return rollupPlugin;
 }
 
-export function normalizeRollupOutputOptions(
+export async function normalizeRollupOutputOptions(
   qwikPlugin: QwikPlugin,
   rollupOutputOpts: Rollup.OutputOptions | Rollup.OutputOptions[] | undefined,
   useAssetsDir: boolean,
   outDir?: string
-): Rollup.OutputOptions | Rollup.OutputOptions[] {
+): Promise<Rollup.OutputOptions | Rollup.OutputOptions[]> {
   if (Array.isArray(rollupOutputOpts)) {
     // make sure at least one output is present in every case
     if (!rollupOutputOpts.length) {
       rollupOutputOpts.push({});
     }
 
-    return rollupOutputOpts.map((outputOptsObj) => ({
-      ...normalizeRollupOutputOptionsObject(qwikPlugin, outputOptsObj, useAssetsDir),
-      dir: outDir || outputOptsObj.dir,
-    }));
+    return await Promise.all(
+      rollupOutputOpts.map(async (outputOptsObj) => ({
+        ...(await normalizeRollupOutputOptionsObject(qwikPlugin, outputOptsObj, useAssetsDir)),
+        dir: outDir || outputOptsObj.dir,
+      }))
+    );
   }
 
   return {
-    ...normalizeRollupOutputOptionsObject(qwikPlugin, rollupOutputOpts, useAssetsDir),
+    ...(await normalizeRollupOutputOptionsObject(qwikPlugin, rollupOutputOpts, useAssetsDir)),
     dir: outDir || rollupOutputOpts?.dir,
   };
 }
 
-export function normalizeRollupOutputOptionsObject(
+export async function normalizeRollupOutputOptionsObject(
   qwikPlugin: QwikPlugin,
   rollupOutputOptsObj: Rollup.OutputOptions | undefined,
   useAssetsDir: boolean
-): Rollup.OutputOptions {
+): Promise<Rollup.OutputOptions> {
   const outputOpts: Rollup.OutputOptions = { ...rollupOutputOptsObj };
   const opts = qwikPlugin.getOptions();
   const optimizer = qwikPlugin.getOptimizer();
@@ -253,6 +255,34 @@ export function normalizeRollupOutputOptionsObject(
    */
   outputOpts.hoistTransitiveImports = false;
 
+  // V2 official release TODO: remove below checks and just keep `outputOpts.onlyExplicitManualChunks = true;`
+  const userPkgJsonPath = await findDepPkgJsonPath(optimizer.sys, 'rollup', optimizer.sys.cwd());
+  if (userPkgJsonPath) {
+    try {
+      const fs: typeof import('fs') = await optimizer.sys.dynamicImport('node:fs');
+      const pkgJsonStr = await fs.promises.readFile(userPkgJsonPath, 'utf-8');
+      const pkgJson = JSON.parse(pkgJsonStr);
+      const version = String(pkgJson?.version || '');
+      const [major, minor, patch] = version.split('.').map((n: string) => parseInt(n, 10)) as [
+        number,
+        number,
+        number,
+      ];
+      const isGte452 =
+        Number.isFinite(major) &&
+        (major > 4 || (major === 4 && (minor > 52 || (minor === 52 && (patch || 0) >= 0))));
+      if (isGte452) {
+        outputOpts.onlyExplicitManualChunks = true;
+      } else {
+        console.warn(
+          `⚠️ We detected that you're using a Rollup version prior to 4.52.0 (${version}). For the latest and greatest, we recommend to let Vite install the latest version for you, or manually install the latest version of Rollup in your project if that doesn't work. It will enable the new Rollup \`outputOpts.onlyExplicitManualChunks\` feature flag, which improves preloading performance and reduces cache invalidation for a snappier user experience.`
+        );
+      }
+    } catch {
+      // If we cannot determine the installed Rollup version, avoid warning
+    }
+  }
+
   return outputOpts;
 }
 

packages/qwik/src/optimizer/src/plugins/utils.ts

@@ -0,0 +1,23 @@
+import type { OptimizerSystem } from '../types';
+
+export async function findDepPkgJsonPath(sys: OptimizerSystem, dep: string, parent: string) {
+  const fs: typeof import('fs') = await sys.dynamicImport('node:fs');
+  let root = parent;
+  while (root) {
+    const pkg = sys.path.join(root, 'node_modules', dep, 'package.json');
+    try {
+      await fs.promises.access(pkg);
+      // use 'node:fs' version to match 'vite:resolve' and avoid realpath.native quirk
+      // https://github.com/sveltejs/vite-plugin-svelte/issues/525#issuecomment-1355551264
+      return fs.promises.realpath(pkg);
+    } catch {
+      //empty
+    }
+    const nextRoot = sys.path.dirname(root);
+    if (nextRoot === root) {
+      break;
+    }
+    root = nextRoot;
+  }
+  return undefined;
+}

packages/qwik/src/optimizer/src/plugins/vite.ts

@@ -32,6 +32,7 @@ import {
 import { createRollupError, normalizeRollupOutputOptions } from './rollup';
 import { VITE_DEV_CLIENT_QS, configureDevServer, configurePreviewServer } from './vite-dev-server';
 import { parseId } from './vite-utils';
+import { findDepPkgJsonPath } from './utils';
 
 const DEDUPE = [QWIK_CORE_ID, QWIK_JSX_RUNTIME_ID, QWIK_JSX_DEV_RUNTIME_ID];
 
@@ -345,7 +346,7 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
         const origOnwarn = updatedViteConfig.build!.rollupOptions?.onwarn;
         updatedViteConfig.build!.rollupOptions = {
           input: opts.input,
-          output: normalizeRollupOutputOptions(
+          output: await normalizeRollupOutputOptions(
             qwikPlugin,
             viteConfig.build?.rollupOptions?.output,
             useAssetsDir,
@@ -752,28 +753,6 @@ export async function render(document, rootNode, opts) {
 }`;
 }
 
-async function findDepPkgJsonPath(sys: OptimizerSystem, dep: string, parent: string) {
-  const fs: typeof import('fs') = await sys.dynamicImport('node:fs');
-  let root = parent;
-  while (root) {
-    const pkg = sys.path.join(root, 'node_modules', dep, 'package.json');
-    try {
-      await fs.promises.access(pkg);
-      // use 'node:fs' version to match 'vite:resolve' and avoid realpath.native quirk
-      // https://github.com/sveltejs/vite-plugin-svelte/issues/525#issuecomment-1355551264
-      return fs.promises.realpath(pkg);
-    } catch {
-      //empty
-    }
-    const nextRoot = sys.path.dirname(root);
-    if (nextRoot === root) {
-      break;
-    }
-    root = nextRoot;
-  }
-  return undefined;
-}
-
 const findQwikRoots = async (
   sys: OptimizerSystem,
   packageJsonDir: string