Lazy-loading a 600KB WebAssembly library in Next.js (without killing your bundle)
A developer recently asked a great question on Stack Overflow: how do you use heic2any in a Next.js project without adding ~600KB to the client bundle? They'd tried next/dynamic, await import() ins...

Source: DEV Community
A developer recently asked a great question on Stack Overflow: how do you use heic2any in a Next.js project without adding ~600KB to the client bundle? They'd tried next/dynamic, await import() inside a function, even moving it to an API route. Nothing worked; the bundle stayed bloated. I run ConvertPrivately, a set of 250+ browser-based conversion tools where files never leave the user's device. We use heic2any extensively for HEIC-to-JPG/PNG/WebP conversion, and we hit exactly this problem. Here's what we learned. Why heic2any is 600KB (and why tree-shaking won't help) heic2any bundles libheif compiled to WebAssembly. That WASM binary is ~500KB, and it's the HEIC decoder; you can't shake it out. If your bundler sees import('heic2any') anywhere in the dependency graph, it includes that chunk. The problem isn't the dynamic import syntax. The problem is when the bundler resolves it. Why await import() inside a function still bloats the bundle This is the pattern most people try first: a