问题标签 [code-splitting]

我在 React 中使用了 Webpack 的代码拆分功能。我正在构建一个应用程序，用户将在其中选择一个选项，并呈现相应的 React 组件。但是，我发现使用 CommonJsrequire.ensure仅适用于硬编码字符串。当我使用变量时，它似乎正在工作，组件会切换出来。但是当我查看网络选项卡时，我发现它没有拆分代码——它没有加载任何新的包。当我硬编码时，每次都会调用一个新包。

这是有效的：

这是我想要的工作：

我Dynamic Routing用来做代码拆分

但问题是，当网络速度足够慢时，看起来应用程序在转换到下一页之前会卡住几秒钟。因为它必须等到下一页文件的下载完成。

可以在过渡的过程中添加进度条吗，如果可以，如何实现？

是否有 webpack API 或 React-Router API？

我正在考虑在我现有的基于淘汰赛的 SPA 框架中使用 webpack，以便在用户浏览网站时延迟加载模型

我查看了以下线程 Create individual SPA bundles with Webpack

并且接受的答案似乎与我想要实现的非常相似。基本上，每个 SPA 页面都由从服务器以 JSON 格式返回的组件集合组成。

客户端将这些组件映射到单独的 js 模型。现在，这些 js 模型都捆绑在一个大文件中并提供给客户端，这是网站第一次呈现。

我想将这些组件（通过 require 和 require.ensure）分解成块，这些块将在 webpack 的帮助下按需加载。

因此，我摆弄了上述线程中提出的解决方案，并且效果很好。我还向 webpack.config.js 添加了根指令

这样我就可以在不指定相对路径的情况下需要模块（每个模型都在模型/组件目录中的 js 模块中）

现在我遇到的问题是，我试图将 switch 语句中的所有需求提取到一个返回 Promise 的函数中，这将与我现有的实现很好地配合

所以而不是

我把它改成

然而，在运行 webpack 之后，上面的操作就惨遭失败了。它似乎进入了一个无限循环，因为它最终发现要处理的模块数量惊人地多，并最终吐出许多异常我很确定这是由 loadModule 函数引起的，因为当我尝试直接需要它时它可以工作美好的

有任何想法吗？谢谢

我正在使用 gulp，我想知道它是否具有代码拆分功能。类似于webpack 站点中提到的内容。我在网上看过，但没有看到任何专门用于此的东西。

我有一个这样的应用程序结构：

我想将我的应用程序代码拆分成这样的：

我似乎找不到如何使用 webpack 执行此操作的示例。所以2个问题。这可以做到吗？而且，如何做到这一点？

任何线索或帮助将不胜感激。我整个上午都在研究这个。

Angular 文档在这里提出了建议，但我找不到任何示例或教程。所以这是可能的，但没有人知道怎么做？

你可以在这里找到 webpack 配置

对于我的一条路线，我当前的路线描述如下：

为了拆分路由路径的代码，我相信代码可能如下所示：

但是我缺少的是 OnEnter checkAuth 函数，我该如何包含它？

我正在使用 require.ensure 在react-router路径上创建分割点。但是，我的构建目录仍然只有app.js. vendor.js我期待我使用的每个路径都有一个单独的 js 文件require.ensure。

我require.ensure在每条路径上都这样使用：

我用于构建的 web pack 配置输出如下所示：

这是我的路由文件和我的webpack 配置文件的全部要点。

更新： 我发现我做错了什么。我的容器项目结构是这样的：

问题：我仍在导出我在路由文件中需要的容器，如下所示：从'./containerB/containerB'导出containerB 删除index.js 中的导出并直接从containerB.js 中要求就可以了。

以下配置将创建 client.js 和 vendor.js。

例子

入口

插入

为了让它工作，我需要在 HTML 中添加 client.js 和 vendor.js 文件，否则我会得到错误：Uncaught ReferenceError: webpackJsonp is not defined。

如何在 index.html 中仅包含 client.js 文件并使其自动需要 vendor.js 文件？

我希望获得与使用 require.ensure 拆分代码时相同的行为。

我正在使用 django 存储从 s3 提供我的静态文件，并且正在将它们全部移动到 webpack 包中。这适用于django-webpack-loader不关心 django 在哪里找到捆绑包的情况。

我的问题是，当我开始使用 定义分割点require.ensure时，捆绑包尝试使用相对路径而不是 s3 存储桶下载块，因为 webpack 的代码分割功能与 django 存储无关。

有没有办法注入自定义逻辑来按需获取块？我并没有将我的 s3 捆绑地址硬编码到配置文件中，但到目前为止我尝试过的任何方法都没有奏效。

这是我的 webpack 配置（用咖啡脚本编写）

我不懂 webpack，尤其是代码拆分和分块。我是前端开发的新手。

假设我有一个大型多页 AngularJS 应用程序，其中一些页面（但不是全部）使用由许多 AMD 模块组成的大型供应商库的片段，所有这些模块都位于单独的文件中。所以我配置了多个入口点，每个页面一个。制作以下捆绑包似乎是合理的：

• 每个页面的捆绑包，包含我的应用程序代码，可能还有 css 等
• 包含我的供应商的 AMD 模块（或至少是我的任何页面使用的所有模块）的捆绑包
• 包含多个我的应用程序页面使用的常用库（例如 Angular、jquery、moment 等）的捆绑包。

所以我做了以下网页配置：

这不会产生预期的结果。我得到的是这样的：

• page1Entry.bundle.js //包含我的应用程序代码和一些供应商库
• page2Entry.bundle.js //仅包含我的应用程序代码
• vendor.bundle.js //几乎完全是空的
• commons.bundle.js //似乎是正确的，有角度等创建了一些编号的块，例如：
• 4.chunk.js //small，包含我的两个页面使用的一些应用程序逻辑。没有供应商库——为什么要创建它？
• 6.chunk.js //巨大的，包含我的一些应用程序逻辑和一些供应商库——为什么？

此外，我看到已部署的代码尝试从服务器获取编号的块，但它没有从部署所有块的我的 /deploymentcontext/js 文件夹中获取它们 - 它试图从页面 URL 加载它们（例如http ://my.domain/my/page/4.chunk.js）。如果我使用 output.publicPath 来配置它，我必须对部署上下文进行硬编码。我怎样才能解决这个问题？

我究竟做错了什么？