问题标签 [code-splitting]

好的，所以我正在努力将我们的 JS 正确拆分为一堆异步加载的块。

我import在几个入口点使用，效果很好：

在其他地方：

Webpack 成功地创建了单独的块，moment并some-other-module 在需要时异步加载文件。

然而：

some-other-module实际上也需要moment，使 Webpackmoment也包含在some-other-module's 块中，导致重复。

这是预期的行为吗？如果是这样，推荐的解决方案是什么？

我正在尝试require.ensure使 Webpack 2 为旧版浏览器创建包含 polyfill 的单独包。

我的理解是，以下代码将导致whatwgFetch创建和加载一个新包：

Webpack 输出只创建了一个包，当我检查它时，我可以看到该whatwg-fetch模块已包含在其中。

我的假设基于 Webpac 2 代码拆分指南：https ://webpack.js.org/guides/code-splitting-require/

我还应该怎么做才能让 webpack 创建和加载一个单独的包？

使用 webpack2.2.0-rc1 和 react routerv4，并使用这个gist使代码拆分工作，其中说明如下

它确实有效，但我使用的是服务器端渲染。因此，在服务器上我需要组件 A，然后在客户端上我 System.import 组件 A。最后，当我访问延迟加载的路由时，我得到了这个反应重用标记警告，因为客户端最初从https://gist.github加载了 null .com/acdlite/a68433004f9d6b4cbc83b5cc3990c194#file-app-js-L21 加载组件 A。 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) CO 0.0.0 </h1></div><!-- react-empty: 6 - (server) CO 0.0.0 </h1> </div><div data-radium="tru

我怎样才能使这项工作没有错误？

我有一个不需要立即加载的子组件，我想拆分它。我正在尝试通过有条件地加载反应组件require.ensure。我没有收到任何控制台错误，但我也没有看到任何正在加载的内容。这是我正在调用的代码：

它目前只是呈现一个空白屏幕（没有错误）。这以前在我使用import 'displayComponent' from './content-zones/component.jsx'并像您通常会做出反应一样返回它时起作用，而不是这个 require.ensure 但是。不知道我在这里做错了什么，知道如何做这样的事情吗？谢谢！

是否有可能实现嵌套异步路由获取，System.import因此应用程序仅分为几个合理的块，而不是许多小块？

背景

我正在我的 React 应用程序中实现捆绑拆分。最初我实现了 bundle-loader（我无法在所有情况下都开始工作），然后使用 System.import，我发现它的行为更加可预测。

问题

代码拆分在逐个路由的基础上工作得很好，但是，它会产生许多小包，并且额外的包和获取的开销是不必要的和浪费的。

例如，我有这段代码，当您导航到他们的页面时，它会为仪表板、设置或图像加载包：

首次导航到 Route1 路径时，是否可以为所有三个加载捆绑包？

非常感谢

我正在尝试使用 webpack 设置我的构建系统来进行基于路由的代码拆分（我使用的是 react-router 和 webpack 2.2）。

一切都很顺利，在网上找到了一些例子，我遇到的问题是 CSS。我正在使用 ExtractTextPlugin 将我的 css 提取到一个单独的文件中。问题是它只从主包中提取 css，它不提取在其余块中找到的 css。

我想要的是提取css文件中的所有样式，以便能够加载并单独缓存它。

有任何想法吗？谢谢！

如果我错了，请纠正我，但是 webpack 所做的是将所有文件捆绑为一个，然后将它们提供给客户端以减少请求。之后，客户端仍然需要加载该文件才能让您的应用程序运行，因此为了使其更快，代码拆分允许客户端按需加载应用程序的不同部分，对吗？

我不确定如何使用文档中的以下代码来做到这一点。所以如果我把下面的代码放在一个已经加载的文件中，第一个参数指的是依赖项，第二个指的是回调。这意味着我想对依赖项做的任何事情都必须进入回调，对吗？

我正在使用 webpack 2 作为模块捆绑器编写一个 javascript webapp。

我需要的是一种混合长期缓存功能（https://webpack.js.org/guides/caching/）和代码拆分（https://webpack.js.org/guides/code-splitting/）的方法。

我可以使用 require.ensure 延迟加载供应商库（在我的情况下为 pixi.js），但这会导致创建包含 lib 的包。我也可以创建可缓存的包，但我想创建一个用于长期缓存的包，并在延迟加载的部分中使用它。

可能吗？

编辑 1

我添加了我的配置的一些部分以获得更好的解释。

我将供应商捆绑包用于启动时所需的外部库，但仅在某些情况下才需要 pixi.js，但我希望长期缓存。

捆绑阶段发出这 2 个文件（以及许多其他文件）：

pixi.8ef3aeac142f1bf921bf.bundle.js 6.9331d810904191781167.js

它们的内容几乎相同。第二个是由 require.ensure 创建的，但我希望pixi.8ef3aeac142f1bf921bf.bundle.js使用过。

我正在努力解决 react-router + webpack 代码拆分 + 服务工作者（或缓存）的问题。

基本上问题如下，代码拆分工作正常，但有时我会从 sentry.io 的客户那里收到错误报告，例如：

我的反应路由器代码如下：

对于我的 ServiceWorker，我使用具有以下配置的 OfflinePlugin：

这个问题与浏览器无关，因为我有来自 IE11、safari、chrome 等的报告。

关于我可能做错了什么或如何解决这个问题的任何线索？

想象一下，我有一个丰富的应用程序，它使用了很多 3rd 方模块，包括lodash、moment、axios、react。

如果我最后将所有内容捆绑在一个捆绑包中，则大小将高于 1MB。

我希望 webpack 以它存储的方式打包我的库：

1. 分开写
2. 分别的时刻
3. 所有其他node_modules都存储在供应商捆绑包下
4. 应用程序的代码存储在单独的文件中

我尝试以不同的方式使用CommonsChunkPlugin，但从未收到我想要的结果。

我准备了示例存储库来说明我的问题： https ://github.com/PavelPolyakov/webpack-react-bundles

Webpack 入口部分（conf/webpack.base.config.js）：

这是生产配置（conf/webpack.production.config.js），试图分离模块：

在这种情况下，moment 和 lodash 仍然会出现在 vendor bundle 中。我想把它们放在两个单独的包中。

任何想法表示赞赏。