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

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

框架

我在用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错误，应该怎么处理这种公共模块的预加载问题？

我来解答赞 7 收藏

反馈

2 条解答

Designer°开心 Lv1

这个问题我遇到过，qiankun下处理共享模块确实容易踩坑。关键在于要让系统知道lodash已经被加载过了，别再重复加载。

给你个可行的方案：
1. 在主应用里用webpack的externals配置lodash，这样它就不会被打包进去
2. 在index.html里直接用script标签加载lodash的CDN版本
3. 子应用也配置externals，告诉它们直接使用全局的_变量

具体操作：

主应用webpack配置：

externals: {

  lodash: '_'

}

然后在index.html头部加上：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

子应用同样配置externals，这样它们就会直接使用window._而不会重复加载。

报错那个SyntaxError就是因为模块系统发现同一个文件被不同ID加载了两次。用CDN+externals的方案最稳，我们项目也是这么干的，打包体积能减不少。

还有个备选方案是用webpack的splitChunks把lodash抽成公共chunk，但qiankun环境下externals方案更简单直接。

2026-03-07 09:04

欧阳庆芳 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