JavaScript Interview Question #160

What is code splitting?

Performance, Browser APIs, Rendering & Modern Web Architecture Senior Advanced

Quick Interview Answer

Code splitting divides an application bundle into smaller pieces that can be loaded when required instead of sending all JavaScript during the initial page load. This can reduce initial download, parsing, and execution costs.

Detailed Explanation

Code splitting divides an application bundle into smaller pieces that can be loaded when required instead of sending all JavaScript during the initial page load. This can reduce initial download, parsing, and execution costs.

Dynamic import is a standard JavaScript mechanism often used by bundlers to create asynchronously loaded chunks for routes, reports, editors, or other optional features.

Code Example

async function openAdminReport() {
    const report =
        await import("./admin-report.js");

    report.render();
}

document
    .querySelector("#openReport")
    .addEventListener("click", openAdminReport);