如何使用混合webapp (MPA和SPA相结合)

Question

使用现代JS框架构建多页应用程序的良好实践是什么？

多页应用程序

在多页应用程序中，我们有多个模板，使用一些“模板语法”为我们提供后端数据，并且AJAX (如果需要)或高级的UX巫毒通常由jQuery处理。

单页应用程序

在单页应用程序中，“后端数据”由AJAX请求和整个路由提供，前端逻辑由JS处理。我们经常使用一些JS框架，如角或反应，并编译我们的资源与任务运行/包，如webpack或吞咽。

混合应用程序

但在网络上最受欢迎的似乎是混合应用。在使用这样的应用程序时，典型的构建工作流是什么？我找不到任何教程或指南。

所以说得特别一点。我想象一下webapp在哪里，每个页面都要编译，并且可以共享一些资源。每个页面都有自己的JS路由，比如向导或子组件。数据是在页面加载和AJAX期间加载的。

例如，我的webapp将有3页：

• 客人页面-将为网站用户提供有限的内容，并吸引他注册。
• 用户-将为签名的网站用户提供完整的内容，资源将被扩展为来宾内容。
• 管理-只共享样式和webapp“核心”

任务运行程序/绑定器

例如，在webpack中，是否有一种方法可以指定多个入口和输出点？也许更好的方法是有多种webpack/gulp结构。在这种情况下，如果我有很多页面，我将不得不为每一页编写webpack/gulp配置，尽管其中一些配置可能完全相同。如何运行这样的构建？

共享资源

浏览器是否会使用相同的散列(如bundle.a2k4jn2.js )在同一域中加载缓存的js包，但地址不同？如果是这样的话，如何在webpack或gulp等工具中指定这样的行为。我听说过CommonsChunkPlugin，但不知道如何使用它，甚至我也在寻找正确的方向。

模板

如果我想要加载一些“后端”数据，不是通过AJAX，而是在页面加载时。当然，每个模板引擎都为我们提供了直接用html模板(如JSP或PHP )编写本机代码的能力。但是，如果某些路由是由JS处理的，并且页面在初始加载时看不到“模板标记”，即模板将不会被编译。有时，服务器和客户端的模板引擎可能会有相同的特殊标记，如刀刃和角，这会导致冲突。

目录结构

我认为，在混合应用程序前端和后端将紧密耦合。在混合应用程序中共享JS可能会导致非常复杂的导入(在es6或html脚本标记中)。如何保持简单。

部署

那么部署一个应用程序呢？在java中，这很容易，因为我们只是在构建工具(maven，gradle)中指定目录(已编译的页面)，这些目录被复制到jar/war中，但是在PHP源代码中并不编译如何使“js源代码”远离生产，除了编写自己的批处理/bash脚本之外，我无法想象明智的解决方案。

摘要

我提到了具体的技术和框架。但我的问题是关于使用这样一个sth应用程序的常见方法，而不是“如何在这个工具中做某事”。虽然代码示例将受到极大的赞赏。

Answer 1

他们在这个问题上是很多的，作为一个起点，你可以在webpack中定义多个切入点。

https://webpack.js.org/concepts/entry-points/

如果您想要在FE和BE之间混合加载数据，那么您确实需要编写一个同构的JS应用程序，并使用Node作为您的BE，否则，您将以不同的语言编写所有的东西两次，并且曾经遇到过这样的项目，相信我，您真的希望避免这种情况。

这个关于共享资源的问题的另一点最好的答案是WebPack的捆绑分裂，这是为了解决这里的问题。

https://webpack.js.org/guides/code-splitting/

Answer 2

我不确定我是否完全理解这个问题，但是单spa(是的，它是多余的)是一个工具，可以用来将多个应用程序(即使它们是不同的框架)合并到一个页面应用程序中。链接到文档：https://single-spa.js.org/docs/getting-started-overview