各位 webpack 大佬，请问有没有办法手工加载 webpack 打包生成的 lazy chunk ？

This topic created in 1904 days ago, the information mentioned may be changed or developed.

webpack 将项目打包成三个文件，分别是：

runtime.js
main.js
lazy-chunk.js

其中主要功能都在按需加载的 lazy-chunk.js 里面。

index.html 文件中有直接引入了 runtime.js 和 main.js

<body>
  <button type="button" id="loadApp">Load App</button>
  <button type="button" id="setParam">Set Param</button>
  <button type="button" id="destoryApp">Destroy App</button>
  <div id="app-container"></div>
  <script src="runtime.js" defer></script>
  <script src="main.js" defer></script>
</body>

点击 button#loadApp 会通过 main.js 来加载 lazy-chunk.js 并在 div#app-container 进行初始化。

想问的问题是，有没有办法跳过 main.js ，直接加载 lazy-chunk.js 进行初始化？

4 replies • 2021-04-25 16:13:56 +08:00

SoloCompany

Apr 25, 2021

不知道你的目的是什么, 如果是希望减少一个请求的话, 直接把 main.js inline 到 html 里面就好了 (但既然如此为和又要生成 runtime.js 而不是和 main.js 放一起)

如果目的是自动执行的话, 你不可以直接改 main.js 逻辑或者 src=main.js onload=loadApp.click() 吗?

beginor

Apr 25, 2021

@SoloCompany 是需要把 lazy-chunk.js 移植到另外的运行环境中，这个环境不受自己控制，同时这个项目的编译过程也不受自己控制

Mutoo

Apr 25, 2021 via iPhone

@beginor webpack 5 的 module federation 能够完成你的需求。最近在一个项目中使用了，非常不错。

beginor

Apr 25, 2021

@Mutoo 谢谢，我去看一下

各位 webpack 大佬， 请问有没有办法手工加载 webpack 打包生成的 lazy chunk ？

各位 webpack 大佬，请问有没有办法手工加载 webpack 打包生成的 lazy chunk ？