微前端预加载如何避免重复加载相同模块？

书生シ柚溪提问于 2026-02-18 12:15:24 阅读 6

框架

我在用qiankun搭建微前端时，尝试给两个子应用配置预加载，发现它们都引用了lodash，但每次预加载都会重复加载这个模块，导致打包体积增大。我尝试在主应用里用import('lodash')提前加载，但子应用还是重新请求了模块，控制台还报错：


// 主应用预加载代码
async function preload() {
  await Promise.all([
    import('@subapp1').then(app => app.preload()),
    import('@subapp2').then(app => app.preload()),
    import('lodash') // 尝试提前加载公共模块
  ])
}

这样操作后子应用启动时依然会再发lodash的请求，甚至出现Uncaught SyntaxError: The requested module 'lodash' already has been loaded via a different module ID错误，应该怎么处理这种公共模块的预加载问题？

我来解答赞 5 收藏

反馈

1 条解答

欧阳庆芳 Lv1

用webpack的externals配置，把lodash提取到主应用的公共依赖里，子应用通过全局变量访问。主应用改下preload函数，提前加载lodash并挂载到window上。

// 主应用 webpack.config.js

module.exports = {

  externals: {

    lodash: '_'

  }

}



// 主应用 preload

async function preload() {

  window._ = await import('lodash')

  await Promise.all([

    import('@subapp1').then(app => app.preload()),

    import('@subapp2').then(app => app.preload())

  ])

}

子应用也加同样的externals配置，打包时就不会重复打进去了。搞定，就这样。

2026-02-18 12:44