新特性解析：ES12 中的 Dynamic import 特性-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中，新增了一个非常实用且强大的特性：Dynamic import，也称为“import()”。这个特性能够让我们在运行时才能决定导入哪些模块，从而实现按需加载，加快应用的启动速度和减小应用的体积。

Dynamic import 是什么？

Dynamic import 是 ES6 模块规范中定义的一种方法，它可以在运行时动态地导入模块。直到我们运行代码时，才能决定加载哪些模块，从而实现按需加载。这使得我们可以在应用运行时真正需要某个模块时再去加载它，而不是一开始就加载所有模块。具体来说，Dynamic import 可以用 Promise 的形式返回导入的模块，类似于以下代码：

import('./module.js')
  .then(module => {
    // 使用模块中的内容
  })
  .catch(error => {
    // 捕获加载错误
  });

Dynamic import 的优点

使用 Dynamic import 可以带来以下优点：

1. 按需加载

我们可以在应用运行时动态地加载需要的模块，从而减小应用的体积，减少初次加载时间，提高应用的性能。

2. 动态代码分割

Dynamic import 使得代码分割成为可能，我们可以根据组件、路由等等进行代码分割，从而减小应用的体积。

3. 更好的代码可读性

我们可以在代码的不同位置，动态地引入所需的模块，从而使得代码更加清晰易懂。

Dynamic import 的使用场景

Dynamic import 的使用场景非常广泛，下面是一些典型的使用场景：

1. 懒加载组件

使用 Dynamic import 可以在需要加载组件时才去加载，从而提高应用的性能。比如，在 Vue CLI 3 中已经默认支持了组件的懒加载，使用起来非常方便。

// javascriptcn.com 代码示例
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: () => import('@/pages/Home.vue')
    }
  ]
});

2. 按需加载第三方库

在引入第三方库时，如果这个库比较大，可能会增加初始加载时间，从而影响用户体验。因此，我们可以使用 Dynamic import 来按需加载第三方库，只有当需要使用它时才会加载，从而加快应用的启动速度。比如：

// javascriptcn.com 代码示例
function loadLibrary(library) {
  switch (library) {
    case 'lodash':
      return import('lodash');

    case 'moment':
      return import('moment');

    default:
      return Promise.reject(new Error(`Invalid library: ${library}`));
  }
}

loadLibrary('lodash').then(_ => {
  // 使用 lodash 库
});

loadLibrary('moment').then(_ => {
  // 使用 moment 库
});

3. 按需加载路由

在使用 Vue Router 进行路由管理时，我们可以使用 Dynamic import 来实现路由的按需加载，从而减小应用的体积，更好地实现代码分割。

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue')
    },
    {
      path: '/contact',
      component: () => import('@/views/Contact.vue')
    }
  ]
});

总结

Dynamic import 是 ES6 模块规范中的一种方法，可以在运行时动态导入模块。它的使用能够实现按需加载，加快应用的启动速度和减小应用的体积。我们可以使用 Dynamic import 来懒加载组件、按需加载第三方库和实现路由的按需加载等等。在使用 Dynamic import 时，需要注意兼容性问题，并且合理使用动态代码分割，从而保证应用的性能和可读性。

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