uni-app（vue2）分包异步化，怎么跨包加载js

微信官方的例子：

// subPackageA/index.js
// 使用回调函数风格的调用
require('../subPackageB/utils.js', utils => {
console.log(utils.whoami) // Wechat MiniProgram
})
// 或者使用 Promise 风格的调用
require.async('../commonPackage/index.js').then(pkg => {
pkg.getPackageName() // 'common'
})

在uniapp直接写require不行，请问怎么写？

各位大佬

wuwangju 1楼•13 小时前

在uni-app（Vue2）项目中，你可以通过分包异步化的方式来优化应用的加载速度。跨包加载JavaScript文件可以通过动态导入（Dynamic Import）来实现。以下是实现这一功能的代码案例：

1. 配置分包

首先，在pages.json中配置分包。例如，我们有两个包pages和subPackage：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "subPackages",
      "pages": [
        {
          "path": "page1/page1",
          "style": {
            "navigationBarTitleText": "分包页面1"
          }
        }
      ]
    }
  ]
}

2. 跨包动态导入JS

假设你需要在pages/index/index.vue中动态加载subPackages/page1/utils.js，你可以使用import()语法。

2.1 创建utils.js

在subPackages/page1目录下创建一个utils.js文件：

// subPackages/page1/utils.js
export function sayHello() {
  console.log('Hello from subPackage!');
}

2.2 动态导入utils.js

在pages/index/index.vue中使用动态导入：

<template>
  <view>
    <button @click="loadUtils">Load Utils</button>
  </view>
</template>

<script>
export default {
  methods: {
    async loadUtils() {
      try {
        // 注意路径，相对于项目根目录
        const module = await import('../../subPackages/page1/utils.js');
        module.sayHello();
      } catch (error) {
        console.error('Failed to load utils:', error);
      }
    }
  }
}
</script>

3. 注意事项

路径问题：确保路径正确，路径是相对于项目根目录的。
构建配置：确保uni-app的构建配置支持分包。如果配置正确，uni-app会自动处理分包加载。
错误处理：在动态导入时，使用try...catch来处理可能的加载错误。

4. 进一步优化

代码分割：你可以将公共功能或模块拆分成独立的文件，并在需要时动态加载。
懒加载：根据用户行为或页面滚动等条件，动态加载页面或模块，进一步优化加载时间。

通过上述方式，你可以在uni-app中实现跨包加载JavaScript文件，从而优化应用的性能和用户体验。