问题标签 [code-splitting-async]

I'm using React Loadable to code split my components, but the problem is that certain components are referenced from multiple locations. For example, I have this component CarsModule, which is referenced in multiple areas like this:

What ends up happening in the dist/react-loadable.json file is that CarsModule looks like this:

When one of the pages goes to request it during server side rendering that imports it like this '../components/CarsModule', it gets undefined for the module (since the bundle's key is this "../../../../components/CarsModule"). I used the webpackChunkName to try and name those keys in the react-loadable.json file but no luck :(

I have chunk hashing going on inside my webpack prod file which looks like this:

However, there is no CarsModule.js file that is created. How can I solve this issue with multiple components importing the same module from different locations if react-loadable.json is going to use the import location as a key?

If I remove these other files that are doing different imports from my project, the react-loadable.json file will be generated referencing the CarsModule like so:

However, this isn't a very plausible solution because other components still need to reference that CarsModule. Any ideas what I'm doing wrong? Thanks in advance!

Here are my versions of react-loadable & webpack:

Here is my .babelrc file:

尝试访问时发生错误/article/post...。这是 Routes.js 的代码片段，据说错误发生的地方。完整的错误堆栈跟踪位于https://pastebin.com/M0pCULPj完整的存储库位于https://github.com/ElAnonimo/webpack4_2。Article.js 缺少什么来正确渲染？

路线.js：

文章.js：

所以情况就是这样 - 当点击 a 时Link，nprogress 栏将启动，我希望 react-router 仅在异步加载完成后用匹配的路由替换当前组件..就像在 instagram 中一样..

但我只得到这个 -

这是我异步加载组件的 HOC——

我在互联网上的任何地方都没有找到解决方案。所以我在stackoverflow中问了这个问题。我希望这里有人可以解决这个问题。

鉴于以下情况。

一个 webpack 构建生成 3 个包，一个 CI 将它们发布到这样的 CDN（每个构建 ID 生成一个新文件夹）：

现在，考虑下一个构建产生：

其中一些文件可能是相同的，假设没有任何变化，但application.js. 我们有一个生成清单的脚本，它只是比较这两个构建并生成：

我们想要挂钩到 webpack 块加载器策略并从构建中加载块1，因为没有理由使任何客户端缓存无效。

更具体地说，我们希望对版本进行修补，以便我们可以在可能的情况下重用静态资产。

我们需要一个钩子来检索请求并返回一个 url，然后 webpack 将使用该 url 来加载资产，例如：

1. webpack 功能请求使用__webpack_public_path__

我在 webpack 配置中有以下配置用于拆分块。这完美地创建了两个捆绑供应商（在初始文件中导入的节点模块）和通用（在延迟加载的组件中导入的节点模块）

问题 -但有些节点模块我不想包含在任何捆绑包中。既不是上述两个也不是主要的捆绑包，而是单独创建。

import('lodash')应该创建一个 lodash.chunk.js。

import('underscore')应该创建一个 underscore.chunk.js。

我能想到神奇的评论吗？/* webpackIgnore: true*/

有什么方法可以对导出的接口使用动态 import('path') 吗？

我正在使用create-react-app。我想反应路由器基本代码拆分，但我想获取用户在浏览器中打开的第一个块，然后在后台异步获取其他块

路线

假设，如果用户在浏览器中打开 /home，则在加载第一个块后首先加载主块，在后台异步调用其他块

所需输出

1. /home在浏览器中打开
2. 先取回家块
3. 然后在后台异步其他三个块

实际上我正在通过lighthouse chrome extension测试性能。路由器基本代码拆分为我提供了第一页的良好性能，但是当我打开第二页时，它需要时间，但不应该需要时间。我认为如果我们在加载第一个块后让其他块在后台异步是可能的

React 模块在构建之前运行良好- 在此之后，所有文件当然都被编译成一个巨大的 JavaScript 文件。是否可以使用C# 或 C++ 中的动态链接？

到目前为止我们累了

• 代码拆分
• Reacy.lazy
• 基于路由的代码拆分

但仍然不清楚，在构建过程之后，它在生产中是如何工作的？

用例

• 反应应用程序“A”
• 反应组件“B”，包含在“A”中
• React 组件“C”，作为单独的包开发，比方说，一个月后
• 我想复制“B”旁边的“C”，应用程序“A”也应该显示新组件

通常在 Laravel Mix 中，我们可以使用自动提取所有供应商 mix.extract() 或使用mix.extract(['vue','lodash','axios']). 有没有办法提取除少数供应商之外的所有供应商？

例如，当需要导入动态块时，我会加载 Pusher、Echo、Chart.js 等。但是，它们仍然被添加到我的vendor.js文件中。

此外，在提取特定供应商列表时，由于与vendors~js/mychunk1~js/mychunk2~js/mychunk3.