Defer CJS imports in CLI

.changeset/dull-windows-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Defer CJS imports to improve CLI start up

packages/cli/src/commands/hydrogen/build.ts

@@ -1,21 +1,18 @@
 import path from 'path';
-import * as remix from '@remix-run/dev/dist/compiler.js';
-import fsExtra from 'fs-extra';
 import {output} from '@shopify/cli-kit';
 import colors from '@shopify/cli-kit/node/colors';
 import {getProjectPaths, getRemixConfig} from '../../utils/config.js';
-import {flags} from '../../utils/flags.js';
-
+import {commonFlags} from '../../utils/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
-import {Flags} from '@oclif/core';
+import Flags from '@oclif/core/lib/flags.js';
 
 const LOG_WORKER_BUILT = '📦 Worker built';
 
 // @ts-ignore
 export default class Build extends Command {
   static description = 'Builds a Hydrogen storefront for production';
   static flags = {
-    ...flags,
+    ...commonFlags,
     sourcemap: Flags.boolean({
       env: 'SHOPIFY_HYDROGEN_FLAG_SOURCEMAP',
     }),
@@ -61,11 +58,18 @@ export async function runBuild({
   } = getProjectPaths(appPath, entry);
 
   console.time(LOG_WORKER_BUILT);
-  const remixConfig = await getRemixConfig(root, entryFile, publicPath);
-  await fsExtra.rm(buildPath, {force: true, recursive: true});
+
+  const {default: fsExtra} = await import('fs-extra');
+
+  const [remixConfig] = await Promise.all([
+    getRemixConfig(root, entryFile, publicPath),
+    fsExtra.rm(buildPath, {force: true, recursive: true}),
+  ]);
 
   output.info(`\n🏗️  Building in ${process.env.NODE_ENV} mode...`);
 
+  const remix = await import('@remix-run/dev/dist/compiler.js');
+
   await Promise.all([
     copyPublicFiles(publicPath, buildPathClient),
     remix.build(remixConfig, {
@@ -98,7 +102,11 @@ export async function runBuild({
   }
 }
 
-export function copyPublicFiles(publicPath: string, buildPathClient: string) {
+export async function copyPublicFiles(
+  publicPath: string,
+  buildPathClient: string,
+) {
+  const {default: fsExtra} = await import('fs-extra');
   return fsExtra.copy(publicPath, buildPathClient, {
     recursive: true,
     overwrite: true,

packages/cli/src/commands/hydrogen/dev.ts

@@ -1,14 +1,12 @@
 import path from 'path';
-import fs from 'fs-extra';
-import * as remix from '@remix-run/dev/dist/compiler.js';
+import fs from 'fs/promises';
 import {output} from '@shopify/cli-kit';
 import {copyPublicFiles} from './build.js';
 import {getProjectPaths, getRemixConfig} from '../../utils/config.js';
 import {muteDevLogs} from '../../utils/log.js';
-import {flags} from '../../utils/flags.js';
-
+import {commonFlags} from '../../utils/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
-import {Flags} from '@oclif/core';
+import Flags from '@oclif/core/lib/flags.js';
 import {startMiniOxygen} from '../../utils/mini-oxygen.js';
 
 const LOG_INITIAL_BUILD = '\n🏁 Initial build';
@@ -20,7 +18,7 @@ export default class Dev extends Command {
   static description =
     'Runs Hydrogen storefront in a MiniOxygen worker in development';
   static flags = {
-    ...flags,
+    ...commonFlags,
     port: Flags.integer({
       description: 'Port to run the preview server on',
       env: 'SHOPIFY_HYDROGEN_FLAG_PORT',
@@ -83,6 +81,7 @@ async function compileAndWatch(
 
   const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
 
+  const remix = await import('@remix-run/dev/dist/compiler.js');
   const stopCompileWatcher = await remix.watch(remixConfig, {
     mode: process.env.NODE_ENV as any,
     async onInitialBuild() {

packages/cli/src/commands/hydrogen/init.ts

@@ -1,6 +1,5 @@
-import {cli as remixCli} from '@remix-run/dev';
 import Command from '@shopify/cli-kit/node/base-command';
-import {Flags} from '@oclif/core';
+import Flags from '@oclif/core/lib/flags.js';
 
 // @ts-ignore
 export default class Init extends Command {
@@ -30,7 +29,7 @@ export default class Init extends Command {
   }
 }
 
-export function runInit({
+export async function runInit({
   template,
   typescript,
   token,
@@ -47,5 +46,6 @@ export function runInit({
     token ? `--token ${token}` : '',
   ];
 
-  remixCli.run(['create', ...defaults]);
+  const {cli} = await import('@remix-run/dev');
+  cli.run(['create', ...defaults]);
 }

packages/cli/src/commands/hydrogen/preview.ts

@@ -1,16 +1,16 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import {muteDevLogs} from '../../utils/log.js';
 import {getProjectPaths} from '../../utils/config.js';
-import {flags} from '../../utils/flags.js';
+import {commonFlags} from '../../utils/flags.js';
 import {startMiniOxygen} from '../../utils/mini-oxygen.js';
 
 // @ts-ignore
 export default class Preview extends Command {
   static description =
     'Runs an existing Hydrogen storefront build in a MiniOxygen worker';
   static flags = {
-    paths: flags.path,
-    port: flags.port,
+    paths: commonFlags.path,
+    port: commonFlags.port,
   };
 
   async run(): Promise<void> {
@@ -30,10 +30,10 @@ export async function runPreview({
 }) {
   if (!process.env.NODE_ENV) process.env.NODE_ENV = 'production';
 
-  const {root, buildPathWorkerFile, buildPathClient} = getProjectPaths(appPath);
-
   muteDevLogs({workerReload: false});
 
+  const {root, buildPathWorkerFile, buildPathClient} = getProjectPaths(appPath);
+
   await startMiniOxygen({
     root,
     port,

packages/cli/src/hooks/init.ts

@@ -1,18 +1,13 @@
-import type {Hook} from '@oclif/core';
 import {spawnSync} from 'child_process';
 import {output} from '@shopify/cli-kit';
+import type {Hook} from '@oclif/core';
 
 const EXPERIMENTAL_VM_MODULES_FLAG = '--experimental-vm-modules';
 
 const hook: Hook<'init'> = async function (options) {
   if (
-    !options.id ||
-    !['hydrogen:dev', 'hydrogen:preview'].includes(options.id)
-  ) {
-    return;
-  }
-
-  if (
+    options.id &&
+    ['hydrogen:dev', 'hydrogen:preview'].includes(options.id) &&
     !process.execArgv.includes(EXPERIMENTAL_VM_MODULES_FLAG) &&
     !(process.env.NODE_OPTIONS ?? '').includes(EXPERIMENTAL_VM_MODULES_FLAG)
   ) {

packages/cli/src/utils/config.ts

@@ -1,8 +1,8 @@
 import type {ServerMode} from '@remix-run/dev/dist/config/serverModes.js';
-import {readConfig, type RemixConfig} from '@remix-run/dev/dist/config.js';
+import type {RemixConfig} from '@remix-run/dev/dist/config.js';
 import {createRequire} from 'module';
 import path from 'path';
-import fs from 'fs-extra';
+import fs from 'fs/promises';
 
 const BUILD_DIR = 'dist'; // Hardcoded in Oxygen
 const CLIENT_SUBDIR = 'client';
@@ -46,6 +46,7 @@ export async function getRemixConfig(
       process.env.NODE_ENV = 'test';
     }
 
+    const {readConfig} = await import('@remix-run/dev/dist/config.js');
     const config = await readConfig(root, mode);
     process.env.NODE_ENV = env;
 

packages/cli/src/utils/flags.ts

@@ -1,6 +1,6 @@
-import {Flags} from '@oclif/core';
+import Flags from '@oclif/core/lib/flags.js';
 
-export const flags = {
+export const commonFlags = {
   path: Flags.string({
     description: 'the path to your hydrogen storefront',
     env: 'SHOPIFY_HYDROGEN_FLAG_PATH',

packages/cli/src/utils/mini-oxygen.ts

@@ -1,11 +1,7 @@
 import path from 'path';
-import miniOxygen from '@shopify/mini-oxygen';
 import {output} from '@shopify/cli-kit';
 import colors from '@shopify/cli-kit/node/colors';
 
-const miniOxygenPreview =
-  miniOxygen.default ?? (miniOxygen as unknown as typeof miniOxygen.default);
-
 type MiniOxygenOptions = {
   root: string;
   port?: number;
@@ -21,6 +17,10 @@ export async function startMiniOxygen({
   buildPathWorkerFile,
   buildPathClient,
 }: MiniOxygenOptions) {
+  const {default: miniOxygen} = await import('@shopify/mini-oxygen');
+  const miniOxygenPreview =
+    miniOxygen.default ?? (miniOxygen as unknown as typeof miniOxygen.default);
+
   const {port: actualPort} = await miniOxygenPreview({
     workerFile: buildPathWorkerFile,
     assetsDir: buildPathClient,