Question

我需要创建一个轻量级的入口点，该入口点将注册全局功能以呈现异步加载的小部件。代码是这样的：

// entry.js
window.register = function(...args) {
  import("./renderer").then(m => m.default(...args))
}

// renderer.js
import ReactDOM from "react-dom"
import React from "react"
const getWidget = name => React.lazy(() => import(`./widgets/${name}`))

export default renderWidget(name, slot, params) {
  const Widget = getWidget(name)
  ReactDOM.render(
    <React.Suspense>
      <Widget {...params} />
    </React.Suspense>,
    slot
  )
}

// widgets/MyWidget.js
import React from "react"

export default function MyWidget() {
  return <div>Whatever</div>
}

我想将entry.js放在标题中；因此，在正文中，我可以执行<script>register("MyWidget", document.querySelector("#some-slot"))</script> –它应该自动获取renderer.js，MyWidget.js以及任何相关的供应商代码。

据我了解，entry.js完全没有自己的依赖性：renderer是异步块，因此renderer导入的任何内容都应放在该块文件中。 entry.js不应包含我自己的代码（并且应尽快加载）。

但是以某种方式，事实并非如此。在默认设置optimization.splitChunks.chunks: "async"下，我的entry.js包含react和react-dom。使用chunks: "all"，webpack会创建单独的块vendors~entry.js –但这是一个 sync 块，必须手动将其包含在页面中；这不是我所需要的。

为什么输入块中包含来自异步块的供应商模块？以及如何实现所描述的行为？

Webpack 4：拆分块：异步块的供应商模块

0 个答案: