问题标签 [code-splitting]

我正在尝试为我常用的反应组件建立一个存储库，然后我可以将其添加到我的项目中component-kit并重用它们，所以像

目前我有以下项目结构：

index.js文件以下列方式导入所有组件：

然后我使用 webpack 将这些导入中的每一个构建到单独的文件中，这是我的配置，根据此处提供的代码拆分文档

目前这会输出 2 个文件dist.js，0.dist.js我不知道如何以文件 outputet 具有组件名称的方式设置它，MyComponent.js因此我可以像上面提到的那样包含它。理想情况下，它们不会将 react 包含在它们的构建中，因为它始终存在于父组件中。

我正在尝试创建一个库，该库公开一个函数，该函数根据传递的参数动态导入其他库。就像是：

库不应该提前知道 deps，但是使用它的应用程序肯定会并且会导入 foo 和任何 deps。

当我尝试创建这样的东西时，我收到一条错误消息“找不到模块栏”。我知道 webpack 使用静态分析来捆绑动态导入，但我知道它可以在导入中有变量。

如果有办法提前列出依赖关系，那很好。我尝试过这样的事情（来自我使用 foo 的应用程序）

希望 webpack 在运行时发现它已经捆绑了这个模块，但它似乎与模块 ID 不匹配。我看到 bar 和 baz 捆绑成块，但实际导入使用不同的模块 ID。

我还尝试让 foo 了解所有可能的 deps（按名称，但不导入它们），但它失败了，因为它需要在构建时了解它们。像这样：

有可能做我要求的吗？

编辑：我刚刚意识到像我最后一个想法这样的东西可以奏效，只是感觉很奇怪。更一般地说，我认为 import() 可以接受变量。

如果这是推荐的解决方案，那还不错。我只是希望有一种方法可以让 foo 自己进行导入。

我的应用程序如何拆分成块

我的应用程序主要且唯一的入口块包含一些在整个应用程序中重用的通用逻辑，例如布局或辅助方法以及与身份验证相关的组件，例如登录/注册对话框。这个块在其依赖树的目录中具有react、react-dom、和其他一些库，redux因为它们正在被身份验证组件使用。react-routernode_modules

所有这些依赖项都捆绑到一个app.js始终初始加载的文件中。每当用户开始使用需要登录用户的应用程序的某些部分时——例如仪表板、表单和其他应用程序功能，就会加载包含该功能的附加 javascript 块。webpack由于import()分布在整个应用程序代码中的调用，这些额外的块是自动生成的。

当新用户加载应用程序但未登录时，app.js将加载该应用程序并为用户提供登录掩码。用户成功登录并重定向到主仪表板后，仪表板的代码将异步加载。该代码由 自动构建到dashboard.js块中webpack，还依赖于许多已经嵌入到app.js块中的库（例如react等react-dom）。因为该dashboard.js块不复制那些库，所以与app.js.

为了充分利用浏览器缓存，所有这些块（在这个简化的示例中：入口块app.js和动态块dashboard.js） [chunkhash]的名称中都有一个。与来自 的库代码相比，node_modules动态块的代码和app.js实际应用程序代码的部分都发生了很大变化。

我想做什么

我想以webpack一种方式进行配置，以检测哪些库 node_modules在超过 2 个（或任何可配置数量）的块中使用，并自动将它们拆分为一个额外的块，vendor.js.

app.js该块应包含当前不经常更改的库部分，因此用户不会经常重新下载库代码。

据我了解， CommonsChunkPlugin在手动添加大量条目块时可以完成类似的操作。我也可以通过import()调用执行的动态代码拆分来做到这一点吗？

例子

我可能会lodash.partialRight在dashboard.js. 只要它只在那里使用，我希望它与dashboard.js. 当我还在登录/注册过程中使用它时，它不应该像 app.js现在这样捆绑，而是应该自动捆绑到vendor.js跨块重用的其他库中。

我正在使用 webpack 2 / 代码拆分，所以我的路线是这样的

但我想像这样嵌套我的路线：

你如何在嵌套路由数组中有嵌套路由？当我导航到时，home/:id我不想丢失所有 JSXHomeContainer提供的东西，我只想调用 use{props.children}来渲染子路由。当您使用代码拆分时，您不能使用 JSX，这就是我尝试重构的原因。

当我导航到时，/home我有一个显示主页图标、关于、设置等的导航栏。显示此导航栏的组件位于HomeContainer. 根据 url，我想加载HomeContainer的路线。我正在使用 wepback 2，代码拆分，反应路由器 3。

这是我的路线文件

问题是，如何让about组件渲染？我希望能够导航到/home/about并加载它，作为HomeContainer.

我正在尝试使用 webpack 根据路由对应用程序进行代码拆分。我在System.import中添加了标签。这是我的路线片段文件：

据我在文档中看到的，我们唯一需要基于路由进行代码拆分的是System.import在标签。我没有改变任何东西Webpack.config.js。无论如何，这是我的 webpack 配置：

最后，只创建 app 和 vendor js 文件。不会创建基于该特定路由的额外 js 文件。但即使在使用 System.import 之后，也不会创建单独的文件，但可以正常工作。

我们使用带有 React 的 webpack 1.x 来捆绑我们的应用程序。此外，为了在 javascript 文件发生更改时破坏缓存，我们将输出设置webpack.config.js为：

这成功地实现了我们在部署新版本的应用程序时更改文件名的目标。在成功部署时，可以看到新文件在那里。

当用户在部署期间使用应用程序时，皱纹就会出现。突然间，曾经存在的块不再存在，而当 index.html 成功更新时，浏览器当前正在使用的一些块对旧的、不存在的文件提出了错误的请求。

webpack 是否有常规的方式来处理切换？或者在我们的 React 应用程序中让它优雅地处理错误的组件导入。我们在 S3 上托管，它（就像 Meteor，我的印象是）在不存在的文件请求上回退到 index.html。在我们的应用程序中，这会导致Syntax error: Unexpected token <错误，因为它需要的是 javascript，而不是 HTML。

编辑：为了避免我的 React 应用程序中的错误导入，也许我可以在路由的 index.js 文件中应用逻辑？目前我的 getComponent 调用看起来就像这样：

编辑2： 在这里找到了我的问题的答案。

Web 开发人员如何判断给定 URL 处的 Web 应用程序是否正在使用代码拆分，例如webpack、rollup 或其他库提供的代码拆分？

我们正在开发一个 React 组件库。某些组件需要更新，而无需重新部署主机应用程序代码。这很像谷歌地图库，其中客户端 API 是一个小的 shell 代码，它在运行时导入实际的地图代码，从而允许热更新而无需任何主机停机时间。所以我们计划把这个库的输出分成两部分——

1. Shell 组件库，任何主机应用程序代码都将使用它来从中导入 Shell 组件。例如

   /li>
2. 我们计划在我们的服务器上托管的核心组件库。我们将继续使用新的修复程序和功能对其进行更新。

在上面的示例中，Notifications 组件将从我们的服务器下载 NotificationsCore 组件并在内部安装它。

我们已经能够导出单个 shell 组件，并使用此处描述的基于scriptjs的技术在运行时正确下载相应的核心组件。

但是，当核心组件使用动态导入时，这会中断，这会导致代码拆分。所有核心组件文件都在远程服务器上可用，但我们还没有成功地将它们打包成具有动态导入的核心组件可以以与服务器 URL 无关的方式从远程服务器加载其拆分块。我们不想在 core bundle 中硬编码公共路径。我们可以在运行时将服务器路径传递给核心组件，以帮助它找到动态导入，但还没有找到这样做的方法。

想法？

单页应用程序安全性的普遍模式似乎是：

1. 用户验证自己
2. 用户获得令牌
3. 用户使用令牌发出 api 请求

这对于限制对数据的访问来说很好，但在很多情况下，可能与另一个用户有关的 UI 代码似乎存在，并且可以通过类似 redux 更改某些值来访问。该 UI 通过某些菜单选项、请求结构（与按钮和表单等相关的 ajax 功能）、说明等提供信息。一般来说，如果可以的话，隐藏这些信息似乎是个好主意。

一种解决方案是将应用程序拆分为特定于用户的捆绑包，并将每个捆绑包放在经过身份验证的端点后面。我对这个解决方案的唯一问题是您最终需要在登录时重新加载一堆共享模块。

我更喜欢通过执行以下操作（使用 webpack）来动态加载模块：

我还没有过多地投入到动态加载块中，所以我不确定要加载哪个端点./file1或者这是否是您自己设置的，但理论上我看不出有任何理由为什么您不能传递令牌并对请求的用户进行身份验证./file1。有谁知道你会怎么做？这是一个值得追求的想法，还是有什么理由让我不想做这样的事情？