[DRAFT] Code-split bundled WMR for performance

.github/workflows/compressed-size.yml

@@ -12,7 +12,7 @@ jobs:
       - name: compressed-size-action
         uses: preactjs/compressed-size-action@v2
         with:
-          pattern: '{wmr.cjs,demo/dist/**/*.{js,css,html}}'
+          pattern: '{wmr.cjs,wmr.*.cjs,demo/dist/**/*.{js,css,html}}'
           build-script: ci
           strip-hash: "\\.(\\w{8})\\.(?:js|css)$"
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

.gitignore

@@ -2,4 +2,5 @@
 dist
 node_modules
 wmr.cjs
+wmr.*.cjs
 yarn.lock

rollup.config.js

@@ -9,9 +9,11 @@ import terser from 'terser';
 /** @type {import('rollup').RollupOptions} */
 const config = {
 	input: 'src/cli.js',
-	inlineDynamicImports: true,
+	preserveEntrySignatures: false,
 	output: {
-		file: 'wmr.cjs',
+		dir: '.',
+		entryFileNames: 'wmr.cjs',
+		chunkFileNames: 'wmr.[name].cjs',
 		format: 'cjs',
 		compact: true,
 		freeze: false,

src/build.js

@@ -1,10 +1,9 @@
-import { bundleProd } from './bundler.js';
 import { bundleStats } from './lib/output-utils.js';
 import { normalizeOptions } from './lib/normalize-options.js';
 import { setCwd } from './plugins/npm-plugin/registry.js';
 
 /**
- * @param {Parameters<bundleProd>[0]} options
+ * @param {Parameters<import('./bundler')['bundleProd']>[0]} options
  */
 export default async function build(options = {}) {
 	options.out = options.out || 'dist';
@@ -14,6 +13,8 @@ export default async function build(options = {}) {
 
 	options = await normalizeOptions(options);
 
+	const { bundleProd } = await import('./bundler.js');
+
 	const bundleOutput = await bundleProd(options);
 
 	const stats = bundleStats(bundleOutput);

src/server.js

@@ -1,6 +1,5 @@
 import { resolve } from 'path';
 import { createServer } from 'http';
-import { createHttp2Server } from './lib/http2.js';
 import polka from 'polka';
 import sirv from 'sirv';
 import compression from './lib/polkompress.js';
@@ -38,6 +37,7 @@ export default async function server({ cwd, overlayDir, middleware, http2 = fals
 
 	if (http2) {
 		try {
+			const { createHttp2Server } = await import('./lib/http2.js');
 			app.server = await createHttp2Server();
 			app.http2 = true;
 		} catch (e) {

src/start.js

@@ -1,5 +1,4 @@
 import server from './server.js';
-import { bundleDev } from './bundler.js';
 import wmrMiddleware from './wmr-middleware.js';
 import { getFreePort, getServerAddresses } from './lib/net-utils.js';
 import { normalizeOptions } from './lib/normalize-options.js';
@@ -13,7 +12,7 @@ import { setCwd } from './plugins/npm-plugin/registry.js';
  */
 
 /**
- * @param {Parameters<server>[0] & Parameters<bundleDev>[0] & OtherOptions} options
+ * @param {Parameters<server>[0] & Parameters<import('./bundler')['bundleDev']>[0] & OtherOptions} options
  */
 export default async function start(options = {}) {
 	// @todo remove this hack once registry.js is instantiable
@@ -22,6 +21,7 @@ export default async function start(options = {}) {
 	options = await normalizeOptions(options);
 
 	if (options.prebuild) {
+		const { bundleDev } = await import('./bundler.js');
 		bundleDev({
 			...options,
 			onError: sendError,

tsconfig.json

@@ -8,7 +8,8 @@
 		"moduleResolution": "node",
 		"allowSyntheticDefaultImports": true,
 		"downlevelIteration": true,
-		"target": "ESNext"
+		"target": "ESNext",
+		"module": "ESNext"
 	},
 	"typeAcquisition": {
 		"enable": true