问题标签 [code-splitting]

我正在使用 Webpack 来提取.svg可以内联并在我的 Javascript 组件中使用的文件。它看起来像这样：

它工作得很好。查看来自 Webpack 的构建文件，我可以看到所有这些.svg文件都放在了我的主app.jsjavascript 文件中。

这会使网站上的每个用户都需要加载的 Javascript 文件膨胀。尽管这只是一次加载，但当有人尚未缓存文件或由于更改而刷新文件时，它确实会增加初始加载。

我知道只有在构建时，javascript 才能通过 node.js 访问文件系统，因此可能没有办法解决这个问题。

我如何对抗这个文件的膨胀呢？

据我所知，有两种选择：

• 使用 XHR 请求检索数据。这可能会很慢，并导致未及时加载的图标闪烁。如果您要拥有像弹性搜索这样的快速东西，这可能是可行的，但否则可能不可行。

• 使用 Webpack将我所有的.svg文件放入一个单独的文件中，这样它们将被缓存更长时间，因为这些文件被触及的频率低于主要的 javascript 代码。

• 使用代码拆分将我的.svg. files and put each.svg` 文件拆分为自己的模块。然后让 webpack 在需要时通过异步注入模块来处理它。

最后一种方法可能只对不直接可见的组件和javascript代码有帮助，因为会有加载时间？

因为并非所有.svg文件都是必需的，所以第一步是删除require.context并仅导入需要的文件。

关于如何处理这个问题的任何想法？很想听听可能有这方面经验的人的来信。否则，也欢迎任何和所有建议。:)

这是我在野外使用 Webpack 代码拆分时遇到的一个意外问题：想象一下这种情况：

1. 用户加载一个带有 Webpack 代码拆分的 React 应用程序，并加载了一些捆绑块
2. 部署发生并且用户可能从服务器收到的任何未来块的内容都会更新（注意：以前的块在部署期间在服务器上被删除）
3. 用户单击一个链接并加载一个新路由，该路由会触发更多捆绑块的加载。除了这些新块与用户浏览器已经加载的块不兼容并且应用程序由于运行时错误而中断

如何防止这种情况发生？

一种可能的解决方案是维护多个版本化的块集，但我想知道大型应用程序是否使用更简单的解决方案。

如果使用了preload-webpack-plugin，所有的块都可以被预取，但它们只会在很短的时间内保持缓存（在 Chrome 中为 5 分钟）。

我启动 GWTP Carstore 应用程序

https://github.com/ArcBees/GWTP-Samples/tree/master/carstore

在超级发展模式。它有许多选项卡，每个选项卡对应一个用 注释的地方@ProxyCodeSplit，例如

单击每个选项卡，我预计每次都会加载不同的 javascript 文件；但是事实并非如此，从我附上的 Fiddler 屏幕截图可以看出。

可以看到在启动期间已经加载了所有 Javascript（当我单击不同的选项卡时，返回 JSON 的各种请求被发送到服务器）。

Carstore 应用程序配置是否不完整，或者我在这里遗漏了什么？

Webpack 延迟加载有时会导致空白屏幕或组件延迟出现，所以我想至少显示一个微调器，这样用户就不会认为我们的页面损坏了。

可以require.ensure检查模块加载是否完成？

我得到了大约 1 秒的延迟，尤其是当我第一次打开屏幕时。

使用 require.ensure 时，有没有办法可以跟踪加载模块的进度？

我正在使用 react-loadable v4.0.4 和 webpack v3.5.1。

这是我的代码，

并使用 react-router-dom v4.1.2，我将 Route 设置如下，

我能够为名为dashboardChunk的各个组件构建块。

但是在加载该组件时，我遇到了以下问题。

在控制台中，

和块文件，

如果我做错了什么，请告诉我。

使用create-react-app，您如何创建单独的供应商捆绑包？

使用该包可以很容易地完成代码拆分react-code-splitting，但我还没有找到任何关于在create-react-app项目中创建供应商捆绑包的具体内容。

我通常在 react-native 中编程或使用 webpack。在大型项目中，捆绑时间可能会很长。在 react-native 中，我必须尝试检查是否react-native unbundle确实使应用程序更快，但这里有一个问题：

代码拆分是否可以加快构建时间？

我正在使用带有代码拆分的 react-router。动态路由之类AuthenticatedRoute的似乎不能很好地使用它。

如果用户转到About路由，登录并返回About路由（不刷新页面），则不会显示任何内容，因为About路由代码拆分块没有被替换/更新，并且没有About导入组件.

编码：

路线

认证路由

该问题似乎与块的生成有关。如果在About用户未登录的情况下创建路由块，则该块将不包含About组件。如果我在登录后刷新页面，则About路由块中有About组件并且一切正常。

我正在使用 webpack (v3.5.6) 构建（捆绑和编译）Web 应用程序。在我们的主条目中，我们（尝试）使用以下语法延迟加载另一个条目文件：

import(/* webpackChunkName: 'charts' */ './charts').then((module) => { /* do something with module */});

定义这些条目后：

当 webpack 做它的事情时，它会生成两个条目，但主条目也包含charts条目（加上它的所有导入）。

在 webpack 配置中，我定义了：

任何人都知道为什么 main.js 输出还包含图表包？