vue如何“动态导入(import)”多个文件(文件、图片、js库)?

项目中需要用到一个动画,这个动画需要引入THREETWEEN库,需要导入图片文件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 '资源路劲',
那么我如何改进上面的代码呢?

补充:
错误提示如下:
图片描述

阅读 16.1k
评论
    2 个回答
    Promise.all([import('xxxx'), import('xxx')]).then(() => {})
      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
      写得我好累~~~

        撰写回答

        登录后参与交流、获取后续更新提醒