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

Question

使用现代 JS 框架构建多页面应用程序有哪些好的做法？

多页申请

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

单页申请

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

混合应用

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

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

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

访客页面 - 将为网站用户提供有限的内容并吸引他注册

用户 - 将为已签名的网站用户提供完整内容，资源将扩展为访客内容

admin - 仅共享样式和 webapp “核心”

任务运行程序/捆绑程序

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

资源共享

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

模板

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

目录结构

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

部署

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

总结

我已经提到了具体的技术和框架。但我的问题是关于使用这样一个 webapp 的常用方法，而不是“如何在那个工具中做某事”。虽然代码示例将不胜感激。

Answer 1

他们在这个问题中很多，作为起点，您可以在 webpack 中定义多个入口点。
https://webpack.js.org/concepts/entry-points/
如果你想在 FE 和 BE 之间混合加载数据，那么你真的需要编写一个同构的 JS 应用程序并使用 Node 作为你的 BE，否则你最终会用不同的语言编写两次，并且曾经遇到过这样的项目，相信我，你真的想避免这种情况。
这个关于共享资源的问题的另一部分最好通过 WebPack 的捆绑拆分来回答，该拆分是针对此处提出的问题而设计的
https://webpack.js.org/guides/code-splitting/