用ES6模块在真实项目里优雅地“按需加载”

在浏览器端开发中，引入模块的方式直接影响代码组织、构建效率与加载性能。ES6（ECMAScript 6）模块规范提供了一套原生的模块化能力，相比早期的script src或import的旧式写法，它更细粒度、更贴近编译时的构建流程，也更便于配合打包工具。这篇文章将从实际使用场景出发，梳理几种常见、实用的ES6模块引入方式，并给出你可以在项目里直接照做的方案。

场景一：原生 <script type="module"> 的轻量引入

当你需要在页面里直接引入少量、独立的JS模块时，原生ESM可以非常轻便。将模块写成.js文件并声明type="module"，在全局作用域中暴露需要的API，即可被其他模块或页面直接使用。

<script type="module">
  import './utils.js';
  // utils.js中导出的默认或命名导出可以直接在本模块使用
</script>

在文件里导出：

// utils.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

注意：这种引入方式加载的是原始JS，不经过打包工具，适合小模块或实验性引入。

场散二：通过 <script> 动态引入ESM

在需要动态加载或条件加载模块时，使用动态import()配合script标签，可以在运行时按需获取并执行模块。

<div id="app"></div>

<script>
  const container = document.getElementById('app');
  if (container) {
    // 动态引入模块
    import('./dynamic-module.js').then(module => {
      container.innerHTML = module.render();
    });
  }
</script>

这种做法能结合服务端渲染、预加载或按需加载策略，更符合现代前端应用的性能诉求。

场景三：构建工具集成——打包后的ESM

在真实项目中，通常会使用打包工具（如Rollup、Webpack、Vite等）将模块打包成一个或多个bundle文件。打包后的ESM模块以更紧凑的形式发布，便于缓存和性能优化。

在项目配置中，将源码文件按规则组织并导出，打包工具会处理依赖解析与打包流程，最终产出一个或多个可缓存的文件。

// entry.js
import { foo } from './bar.js';
import './styles.css';

export { foo };

打包后的使用：

<script type="module" src="/bundle.js"></script>

构建时，确保ESM输出格式与导入路径一致，并配置合适的入口点和输出路径。

延伸：按需加载与懒加载

结合import()和动态导入，可以实现按需加载与懒加载，只在需要时加载对应模块，提升首屏加载性能与资源利用效率。

// 按需加载
const Feature = () => import('./feature.js');

// 懒加载
const Feature = lazy(() => import('./feature.js'));

这种策略特别适合分块加载、路由切换或只在特定条件下才用到的模块。

实战要点与注意事项

• 命名导出与默认导出：根据实际需要选择命名导出或默认导出，导出物在使用时要与导入语句一致。
• 路径与模块解析：构建工具与浏览器解析规则不同，需在开发与生产环境配置一致的解析与别名策略，避免404或解析失败。
• 浏览器兼容：原生ESM在现代浏览器中广泛支持，但旧版环境需用polyfill或降级方案。
• 性能优化：结合懒加载与分块策略，控制首屏资源体积，提高加载速度与用户体验。

结语

ES6模块引入方式不止一种，选择哪种取决于项目规模、使用场景与构建流程。掌握这些方式并结合按需加载与打包策略，不仅能让你的代码更清晰、可维护，也能在性能与加载体验上更胜一筹。在实际项目中灵活切换与组合，才能在“更快、更稳、更小”的目标上取得平衡。