Javascript 如何使用混合webapp（MPA和SPA组合）

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

多页应用程序

在多页面应用程序中，我们有多个模板，使用一些“模板语法”向我们提供后端数据，jQuery通常处理AJAX（如果需要）或高级UX巫毒

单页应用程序

在单页应用程序中，“后端数据”由AJAX请求和整个路由提供，前端逻辑由JS处理。我们经常使用一些JS框架，如Angular或React，并使用任务运行程序/捆绑程序（如webpack或gulp）编译源代码

混合应用程序

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

具体来说。我想象webapp，在其中，每个页面都必须被编译，并且可以共享一些资源。每个页面都有自己的JS路由，比如向导或子组件。在页面加载和AJAX期间都会加载数据

例如，我的webapp将有3个页面：

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

任务执行者/捆绑者

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

共享资源

浏览器是否会在同一个域但不同的地址中加载具有与bundle.a2k4jn2.js相同哈希的缓存js捆绑包？如果是，如何在webpack或gulp等工具中指定这种行为。我听说了CommonsChunkPlugin，但不知道如何使用它，甚至不知道我在寻找正确的方向

模板

如果我不想通过AJAX而是在页面加载时加载一些“后端”数据，该怎么办。当然，每个模板引擎都为我们提供了直接在html模板（如JSP或PHP）中编写本机代码的能力。但若一些路由是由JS处理的，并且“模板标签”在初始加载时对页面不可见，即模板不会被编译，那个该怎么办呢。有时，服务器和客户端中的模板引擎可能具有相同的特殊标记，如Blade和Angular，这可能会导致冲突

目录结构

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

部署

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

摘要

---

我提到了具体的技术和框架。但我的问题是关于使用此类网络应用程序的常见方法，而不是“如何使用该工具做某事”。尽管代码示例将非常受欢迎。

它们在这个问题中非常重要，作为起点，您可以在webpack中定义多个入口点

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

这个关于共享资源的问题的另一点最好的答案是WebPack的捆绑包拆分，它是为这里的问题而设计的

---

我不确定自己是否完全理解这个问题，但single spa（是的，它是多余的）是一种工具，可用于将多个应用程序（即使它们是不同的框架）组合到一个单页应用程序中。链接到文档：

那么netflix中的angular和Facebook中的react呢？他们不是我所说的例子吗？我可以引用大量类似这些的网页。我需要一个答案吗？你想到什么了吗..我还对混合MPA和SPA感兴趣，Vue是渐进式的，这意味着我们可以从类似于jQuery的CDN使用它，甚至在使用引导时用Vue替换jQuery。然后用SPA替换MPA的一部分，从MPA迁移到SPA非常好。我仍然没有找到这些混合场景的好例子。在本博客中：作者不推荐这种组合。@FcoJavier99-记录在案，这篇博客文章已经有6年了，它可能已经有一百年的历史了。如果你要实现一个web应用程序，它也有其他页面，比如服务条款，那么使用

history.pushState

，如果在不同的页面上实现另一个web应用程序，那么目录结构是什么，它们将如何共享资源！使用节点作为后端，该应用程序完全在客户端浏览器上运行，并在需要时向服务器发出少量Ajax请求，有两个web应用程序&用于主页的不同页面、隐私策略等。。。我不知道的是，如何使用不同的工具将整个事情设置为一个你会为网页中的每个独立页面设置一个入口点configDirectory结构实际上取决于你使用的应用程序框架。如果你做了React，那么创建React应用程序就是一个很好的例子。它将静态页面放在

html

文件夹中，将SPA放在

src

中。这适用于单个页面、架构、目录St