vue如何“动态导入（import）”多个文件（文件、图片、js库）？

Question

项目中需要用到一个动画，这个动画需要引入THREE、TWEEN库，需要导入图片文件和json文件，但是在移动端，这个动画是不需要的，想要在移动端达到最佳性能，这个动画相关的资源必须通过动态导入的方式来做，查看了vue的官方文档——动态导入，发现这个例子非常简单，导致我不知道如何修改这个代码，特来请教：

需要改进的代码如下：

import * as THREE from "three";
import * as TWEEN from "tween";

import sphereData from "../../assets/animation/Sphere.json";
import orb from "../../assets/animation/orb.png";
//省略更多导入资源

官方实例代码如下：

return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
  var element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;

}).catch(error => 'An error occurred while loading the component');

官方实例代码中，只导入了一个文件，并且没有命令，直接import '资源路劲'，
那么我如何改进上面的代码呢？

补充：
错误提示如下：

Answer 1

Promise.all([import('xxxx'), import('xxx')]).then(() => {})

Answer 2

const dependencies = {
}

// page's mainFunction
function mainFunction() {
  // Do something with sphereData and orb, ...
  // Check if sphereData defined before use it
  if (dependencies.sphereData) {
    // show the animation
  }
}

// is it desktop?
if (isDesktop) {
  Promise.all([
    import('../../assets/animation/Sphere.json'),
    import('../../assets/animation/orb.png'),
    // other dependencies
  ]).then(([
    sphere,
    orb,
    // other dependencies
  ]) => {
    dependencies.sphere = sphere
    dependencies.orb = orb
    // ...
    
    mainFunction()
  })
} else {
  mainFunction()
}

Promise.all 的用法参见：https://developer.mozilla.org...

注意有些浏览器下 Promise 需要 polyfill
写得我好累~~~