From 697750f9cfe9ff768dfb3628bcec976122874f08 Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Thu, 4 Apr 2024 13:46:55 -0400 Subject: [PATCH 1/2] chore(esbuild): rm inline graceful-fs in dev-server update the building of the dev-server such that we no longer inline graceful-fs in the dev-server. this saves us approximately 10kb in total - 20kb get removed from dev-server/server-process.js, and 10kb are added to `sys/node/index.ts`. this is accomplished by removing graceful-fs from the shared alias list, as it's only needed in `sys` and `dev-server`. we them mark the library as "external" so that esbuild resolves to the version held on to by the `sys` submodule STENCIL-1243 --- scripts/esbuild/dev-server.ts | 12 ++++++++++-- scripts/esbuild/util.ts | 1 - 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/scripts/esbuild/dev-server.ts b/scripts/esbuild/dev-server.ts index 43e7c4e5344..7c2b00750bd 100644 --- a/scripts/esbuild/dev-server.ts +++ b/scripts/esbuild/dev-server.ts @@ -70,9 +70,17 @@ export async function buildDevServer(opts: BuildOptions) { bundleExternal(opts, opts.output.devServerDir, cachedDir, 'open-in-editor-api.js'), ]); - const devServerAliases = getEsbuildAliases(); - const external = [...builtinModules, './ws.js', './open-in-editor-api']; + const external = [ + ...builtinModules, + // ws.js is externally bundled + './ws.js', + // open-in-editor-api is externally bundled + './open-in-editor-api', + // prevent graceful-fs from being inlined in the bundle, saving us ~20kb + 'graceful-fs', + ]; + const devServerAliases = getEsbuildAliases(); const devServerIndexEsbuildOptions = { ...getBaseEsbuildOptions(), alias: devServerAliases, diff --git a/scripts/esbuild/util.ts b/scripts/esbuild/util.ts index 38baac8262e..e79912f50aa 100644 --- a/scripts/esbuild/util.ts +++ b/scripts/esbuild/util.ts @@ -30,7 +30,6 @@ export function getEsbuildAliases(): Record { // reference the same file prompts: './sys/node/prompts.js', glob: './sys/node/glob.js', - 'graceful-fs': './sys/node/graceful-fs.js', // dev server related aliases ws: './ws.js', From d5f12aa571fc84972711579ee1a9c2fd6b3e788a Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Wed, 10 Apr 2024 11:14:06 -0400 Subject: [PATCH 2/2] review(ap): externalize graceful-fs --- scripts/esbuild/dev-server.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/scripts/esbuild/dev-server.ts b/scripts/esbuild/dev-server.ts index 7c2b00750bd..4329321b2e2 100644 --- a/scripts/esbuild/dev-server.ts +++ b/scripts/esbuild/dev-server.ts @@ -11,7 +11,7 @@ import { bundleExternal, sysNodeBundleCacheDir } from '../bundles/sys-node'; import { getBanner } from '../utils/banner'; import { type BuildOptions, createReplaceData } from '../utils/options'; import { writePkgJson } from '../utils/write-pkg-json'; -import { getBaseEsbuildOptions, getEsbuildAliases, getFirstOutputFile, runBuilds } from './util'; +import { externalAlias, getBaseEsbuildOptions, getEsbuildAliases, getFirstOutputFile, runBuilds } from './util'; const CONNECTOR_NAME = 'connector.html'; @@ -76,8 +76,6 @@ export async function buildDevServer(opts: BuildOptions) { './ws.js', // open-in-editor-api is externally bundled './open-in-editor-api', - // prevent graceful-fs from being inlined in the bundle, saving us ~20kb - 'graceful-fs', ]; const devServerAliases = getEsbuildAliases(); @@ -108,7 +106,12 @@ export async function buildDevServer(opts: BuildOptions) { format: 'cjs', platform: 'node', write: false, - plugins: [esm2CJSPlugin(), contentTypesPlugin(opts), replace(createReplaceData(opts))], + plugins: [ + esm2CJSPlugin(), + contentTypesPlugin(opts), + replace(createReplaceData(opts)), + externalAlias('graceful-fs', '../sys/node/graceful-fs.js'), + ], banner: { js: getBanner(opts, `Stencil Dev Server Process`, true), },