Discover gists

Why imperative imports are slower than declarative imports

A lot of people misunderstood Top-level await is a footgun, including me. I thought the primary danger was that people would be able to put things like AJAX requests in their top-level await expressions, and that this was terrible because await strongly encourages sequential operations even though a lot of the asynchronous activity we're talking about should actually happen concurrently.

But that's not the worst of it. Imperative module loading is intrinsically bad for app startup performance, in ways that are quite subtle.

Consider an app like this:

// main.js

Tutorial 0

What is Vulkan

Vulkan is a low-overhead, cross-platform 3D graphics and compute API.

Vulkan targets

Vulkan targets high-performance realtime 3D graphics applications such as games and interactive media across multiple platforms providing higher performance and lower CPU usage.

	const axios = require('axios').default;

	const TC_HOST = 'cardano-testnet-staging.tangocrypto.com';
	const TC_APP_ID = 'xxxxxxxxx';
	const TC_API_KEY = 'xxxxxxxxx';

	const NMKR_auth = 'xxxxxxxxxx';
	const NMKR_host = 'studio-api.testnet.nmkr.io';
	const NMKR_collection_id = '5d0c151f-03d7-4320-8252-096a3642c080'

	SELECT *
	FROM (
	SELECT
	o.distributor_id,
	ui.firstname \|\| ' ' \|\|ui.lastname distributor_name,
	ui.phone,
	ui.email,
	to_char(o.state_date, 'YYYY-MM') qualified_date,
	sum(o.pvq) pvq_total
	FROM user_infos ui

	const React = require(`react`);
	const { renderToPipeableStream } = require(`react-dom/server`);
	const { Writable } = require(`stream`);

	function MyComponent() {
	throw new Error(`My error`);
	}

	class MyWritableStream extends Writable {
	constructor() {

	const myModule = await import(`./other.cjs`);

	// Running node index.mjs writes this out to stdout, top-level `other` property is undefined:
	// [Module: null prototype] {
	// default: { hello: [Function: hello] },
	// hello: [Function: hello],
	// other: undefined
	// }
	console.log(myModule);

	@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

	@tailwind base;
	@tailwind components;
	@tailwind utilities;

	/*
	Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them!
	*/


	const { default: armenia } = await import('./file-name.json', { assert: { type: "json" } });

	const ClassImpl = await import(packageName);
	return new ClassImpl.default();

	[
	{
	"label": "GEOSINTsearch",
	"tooltip": "Searches within posts from Twitter, Reddit and 4Chan and presents anything that contains a Google Maps link",
	"value": "https://cse.google.com/cse?cx=015328649639895072395:sbv3zyxzmji"
	},
	{
	"label": "Pasted tekst",
	"tooltip": "Look if any specifc text has been posted before",
	"value": "https://cse.google.com/cse/publicurl?cx=013991603413798772546:nxs552dhq8k"