On gists

ES6 dynamic import / export

Vue.js

ex.js Raw #

// app.js

async function loadMathModule() {
  const mathModule = await import("./math.js");
  console.log(mathModule.add(5, 3));
}

// Or with .then()
import("./math.js")
  .then((mathModule) => {
      console.log(mathModule.PI);
  })
  .catch((error) => {
      console.error("Failed to load module:", error);
  });

ex2.js Raw #

// app.js
document.getElementById("load-chart").addEventListener("click", async () => {
  const { Chart } = await import("./chart-library.js");
  const chart = new Chart("#chart-container");
  chart.render();
});

code-splitting.js Raw #

// Good: Lazy load heavy modules
const loadChartLibrary = () => import("./chart-library.js");

// Avoid: Loading everything upfront
import ChartLibrary from "./chart-library.js";

json-import.js Raw #

// https://javascript.plainenglish.io/ecmascript-2025-is-now-ready-for-production-df21a6d52157

// Static configuration loading
import appConfig from './config.json' with { type: 'json' };

// Dynamic environment configuration
const envConfig = await import(`./config.${env}.json`, {
  with: { type: 'json' }
});

// Dynamic internationalization resource loading
const locale = navigator.language.slice(0, 2);
const i18n = await import(`./locales/${locale}.json`, {
  with: { type: 'json' }
});