一分耕耘，一分收获！既然都打开这篇《原生 ES 模块构建现代化 SPA 教程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

可以构建不依赖打包工具的现代化SPA。利用原生ES模块、动态导入和前端路由，通过

模块路径需写明文件后缀（如 ./utils.js），这是 ESM 的硬性要求。

2. 实现基于 URL 的前端路由

通过监听 popstate 事件和拦截链接跳转，实现无刷新页面切换。

简单路由逻辑：

• 监听点击带有 data-link 的链接，阻止默认跳转，用 history.pushState() 更新 URL
• 监听 window.popstate 处理前进后退
• 根据当前路径动态导入并渲染对应页面模块

示例代码片段：

// router.js
export async function router() {
  const routes = {
    '/': () => import('./pages/home.js'),
    '/about': () => import('./pages/about.js')
  };

  const path = window.location.pathname;
  const route = routes[path] || routes['/'];
  const page = await route();
  document.getElementById('app').innerHTML = page.render();
}

3. 动态导入页面与组件

利用 import() 表达式按需加载模块，实现代码分割效果。

每个页面导出一个 render() 方法：

// pages/home.js
export function render() {
  return '
Home Page
';
}

组件也可模块化拆分，例如：

// components/Header.js
export function Header() {
  return '
My App
';
}

4. 静态资源服务与开发体验

不需要打包，但仍需一个本地服务器支持 ESM 加载（避免 CORS 问题）。

推荐使用：

• npx serve 或 npx http-server 快速启动
• 或使用 python -m http.server

生产环境可部署到任何静态托管平台（如 Netlify、Vercel、GitHub Pages）。

5. 处理样式与状态管理

CSS 可通过动态创建