import命令会被 JavaScript 引擎静态分析
// 报错
if (x === 2) {
import Haorooms from './Haorooms';
}
解决方案一:require加载
因为require是运行时加载模块,import命令无法取代require的动态加载功能。
在代码中动态加载依赖,例如下面echart主题,我们可以点击切换的时候,动态加载!
require("echarts/theme/"+ data.theme);
解决方法二:import()函数
例如:
const main = document.querySelector('main');import(`./section-modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
按需加载。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
条件加载
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
动态的模块路径
import(f())
.then(...);
上面代码中,根据函数f的返回结果,加载不同的模块。