Webpack 在构建后添加延迟加载的块答案

【问题标题】：Webpack add Lazy Loaded chunks after buildWebpack 在构建后添加延迟加载的块
【发布时间】：2017-05-11 17:10:09
【问题描述】：

好的，这是背景信息：

我正在创建一个 CMS，并且需要用户能够根据需要添加/删除插件。管理页面由 Vue 提供支持，因此整个管理后端都是使用 Webpack 构建的。我正在使用 Vue 的内置路由器来允许通过 Webpack 代码分离进行客户端路由和延迟加载。

问题出在这里：

所以问题是，如果用户添加了一个带有后端视图的插件，比如一个带有 UI 的表单编辑器来编辑表单，则需要将该视图添加到要呈现的前端路由和 Vue 文件中因为需要构建插件的视图。这意味着每次用户添加/删除插件时，他们都需要构建整个管理站点。这是愚蠢的。理想情况下，我希望用户能够添加/删除插件而无需构建任何东西，但如果有必要，最好将单个插件的 Vue 文件构建到自己的块中。

但是如果 Webpack 只构建该文件，是否仍然可以延迟加载它？据我所知，Webpack 会跟踪它构建的文件的关系，因此延迟加载逻辑由 Webpack 在后台处理。

TL/DR； / 一个好的答案会告诉我什么：

是否可以在客户端路由器上使用延迟加载和 Vue.js 而无需在构建时构建路由器（这样在添加插件时就不必构建路由器/删除）？
我可以将单个 Vue 文件构建成一个块，该块可以由现有的 Webpack 构建延迟加载，而无需重新构建整个东西？
或 - 是否有其他方法可以完成此操作？

非常感谢！

【问题讨论】：

您的设计似乎天生就有缺陷。不是为每个页面创建一个组件，而是页面托管框架将成为组件，您将动态加载插件并适当地处理每个插件，这通常需要某种元数据模板结构。如果您需要延迟加载块，请使用 System.import 来处理导入。总的来说，这个问题对于 Stack Overflow 来说太宽泛了，可能没有一个确定的正确答案。

标签： webpack vue.js vuejs2 vue-router

【解决方案1】：

我没有使用 Vue 的经验，我们使用 React 做过类似的实现。但是我们遵循的方法只使用了基本的 JS 功能，所以希望你应该能够做类似的事情。首先，我们将插件定义为插件加载器代码中的外部依赖项，因此它可以使用插件方法而无需将其作为 webpack 包的一部分。然后每个插件都是一个单独的 webpack 项目，它使用这个库配置导出 -

output: {
   library:["registeredPlugins", "[name]"],
   libraryTarget:"umd" // or "var"
}

这会在生成的脚本中创建var window.registeredPlugins.somePlugin = {...} 导出。

接下来，我们使用插件加载器代码中的ScriptJS 加载器在运行时从其 URL 加载插件。我们确保每个插件都有一个唯一的名称，因此它们不会相互覆盖。

希望这会有所帮助。

【讨论】：