import按条件导入 #

import 命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行

if (condition) {
  // 报错
  import moduleA from './moduleA'
}

作用 #

将 js 模块进行按需导入或者按条件导入

这里的 js 模块是指 package.json 中的 js 模块，通过这种方式进行按需导入

import()函数 #

import()函数，支持动态加载模块，返回一个 Promise 对象。 import()加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。

import('./moduleA .js').then(moduleA => {
  console.log(moduleA)
})

button.addEventListener('click', event => {
  import('./dialogBox.js')
    .then(dialogBox => {
      dialogBox.open()
    })
    .catch(error => {
      /* Error handling */
    })
})

特别注意点 #

一旦把 import 中的参数改成变量,如下代码，就会报 the request of a dependency is an expression Cannot find module './dialogBox.js'

let url = './dialogBox.js'
button.addEventListener('click', event => {
  import(url).then(dialogBox => {
    dialogBox.open()
  })
})

解决方案：

应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。如我们要引用一堆页面组件，可以使用import('./pages/'+ComponentName)，这样就可以实现引用的封装，同时也避免打包多余的内容。

相关文章 #

vue 动态加载 js-加载完成之后执行回调

参考资料 #

import()使用过程中，令你百思不得其解的坑

动态引入 import()变量失效问题