0

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

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

2018-03-01 提问
2 个回答
2
Promise.all([import('xxxx'), import('xxx')]).then(() => {})
1
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
写得我好累~~~

撰写答案

推广链接