ES8 标准下如何实现动态导入-JavaScript中文网-JavaScript教程资源分享门户

简介

随着现代前端应用程序的增长，代码分割变得越来越重要。动态导入是一个提高代码分割的方式，可以使得仅在需要时才加载某些代码，而不是将整个代码库都打包成一个文件。

动态导入的实现方式

动态导入是在程序运行时异步加载模块。webpack 模块打包器支持在 ES6 模块系统中实现动态导入。ES8 中，这种支持被标准化了并得到了扩展。ES8 引入了新的 import() 函数语法，用于动态导入模块。使用该函数，可以在运行时异步加载模块，而不需要提前将其静态地导入。

例如：

import('./module.js')
  .then(module => {
    // 模块加载成功后的操作
  })
  .catch(error => {
    // 模块加载失败的操作
  })

使用 import() 函数时，可在 then() 和 catch() 函数中处理模块的状态。如果模块加载成功，则 then() 中的代码将得到执行。如果模块加载失败，则 catch() 中的代码将得到执行。

动态导入的应用场景

可以在程序运行时异步加载模块，而不需要提前将其静态地导入。动态导入是一种非常适用的代码分割方法。具体应用场景可以是一个页面中的某个组件需要通过异步方式加载另一个组件，而这个组件由于太大而无法在初始加载时一起加载进来。在这种情况下，我们可以使用动态导入来加载这个组件。

例如，在基于 React 的应用程序中，可以使用动态导入来异步地加载一个组件。

// javascriptcn.com 代码示例
import React, { Component } from 'react';
  
class App extends Component {
  handleClick = async () => {
    // 动态加载组件
    const OtherComponent = await import('./OtherComponent');
  
    // 状态更新以触发重新呈现，让 OtherComponent 发挥作用
    this.setState({ OtherComponent });
  }
  
  render() {
    const { OtherComponent } = this.state;
  
    return (
      <div>
        {OtherComponent ? <OtherComponent /> : '尚未加载'}
        <button onClick={this.handleClick}>
          加载 OtherComponent 组件
        </button>
      </div>
    );
  }
}

总结

动态导入是一种提高代码分割的有效方法，在需要时异步加载模块，而不是在初始加载时将整个代码库打包成一个文件。ES8 针对动态导入进行了标准化和扩展，使用 import() 函数语法实现动态导入。动态导入的应用场景可以是在一个页面中，需要异步加载某些组件，但这些组件太大且无法在初始加载时一起加载进来。通过使用动态导入可以有效地将组件异步加载并展示出来。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6535ef2c7d4982a6ebdafd09