问题标签 [code-splitting]

我的基于登录的应用程序需要始终知道登录用户的用户名。（MVP）。所以我从url获取用户名，但是当登录成功后打开页面时，我无法从url获取用户名，因为它似乎不存在，但它存在。它仅在刷新后有效。然后我可以得到用户名。

URL 的形式是http://127.0.0.1:8888/AdministrareBloc.html#AdminPlace:admin，我将字符串拆分为仅获取管理部分。

我认为这是因为它在验证用户之前下载了代码。所以我在我的代码中放置了一个分割点，如下所示：（我不知道我是否放置正确）

当用户单击登录按钮时会发生这种情况。分割点的放置是否正确？成功登录后如何获取用户名而不需要刷新页面？

更新

我今天尝试了一个技巧，在 AdminViewImpl 和 UserViewImpl 中放置了一个 Window.Location.reload()，当应用程序启动时，页面每秒重新加载一次，所以这对我来说意味着没有正确使用分割点并且浏览器会在他真正需要之前下载代码，这就是为什么我在刷新后能够看到用户名，因为它会重新下载代码，并且我在刷新时已经登录。

提前致谢

TL;DR：您能否解释一下何时bundle-loader需要使用 Webpack 进行代码拆分？

当我开始将基于 Backbone 的应用程序从 Require.js 迁移到 Webpack 时，我记得require路由器中的这种语句：

会将所需的代码与其余代码放在同一个包中，并且为了生成一个单独的文件，在切换到特定路线时动态需要该文件，我需要使用bundle-loader，如下所示：

现在，当我将代码库迁移到 ES6 模块并使用Webpack 文档中描述require.ensure的语法时：

我不确定是否需要bundle-loader生成多个块并动态加载它们。如果我这样做了，require它会在哪个调用中进行 - 在回调中require.ensure还是在require回调中？或者两者兼而有之？这一切都太混乱了。

我已经开始在“通用”应用程序（react-router、redux、webpack - 主要基于https://github.com/erikras/react-redux-universal-hot-example）中实现代码拆分。

在实现代码拆分的（唯一）路线上，我在进行完整的浏览器刷新时收到以下 React 错误消息：

如果我禁用代码拆分，错误消息就会消失。我猜这是因为 React 在 Webpack 加载器加载 Javascript 块之前进行了第一次渲染，因此它生成的标记与服务器上生成的标记不同。那是对的吗？

• 我应该担心错误消息吗？
• 有什么方法可以确定在此消息发生的确切时间 React 呈现什么？
• 有什么办法可以让消息消失吗？（除了不使用代码拆分）

我想使用 webpack 分块方法在我的路由配置中为单独的路由生成单独的包。实现它的一种方法是使用 require.ensure 定义块的拆分点并根据浏览器的需求异步加载模块。

这是我得到的：

webpack.config.js（根据执行的 npm 脚本与 dev/prod webpack 配置合并）：

webpack.config.dev.js（开发 webpack 配置 [与上面合并]）：

路线.jsx：

我阅读了大量的博客文章和教程，这一切似乎都在这里。然而，webpack 并没有为我使用 require.ensure 的两个路由生成单独的包：

• 智能登陆城市
• 智能登陆公司
• 关于我们页面

我已经超级绝望了，因为应用程序包的大小为 2mb，而且我已经使用了所有可用的大小缩小方法。

谢谢你的帮助！

我是 GWT 和 GWTP 的新手。我知道什么是 GWT 代码拆分和 GWTP 代理代码拆分。我已经红了：

http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html http://dev.arcbees.com/gwtp/core/presenters/creating-places.html

我以为我明白了。所以我喜欢用。：

我有应用程序Administration panel，只有部分用户可以访问。所以不需要大家下载Administration panel相关代码。所以在Administration Presenter我添加@ProxyCodeSplit如下：

在其他演示者中，我有@ProxyStandard而不是@ProxyCodeSplit.

我已经运行应用程序并登录。然后我Network在 chrome 的开发者控制台中打开了选项卡：

在应用程序中打开后Administation Panel：

如您所见，应用程序中没有添加新资源。

我的主要应用程序演示者AppPresenter实现了以下接口AsyncCallStartHandler, AsyncCallFailHandler, AsyncCallSucceedHandler：com.gwtplatform.mvp.client.proxy. 我覆盖了这些方法：

当我进入时，AdmininArea我会收到警报：“异步启动”、“异步成功”。所以我认为everythink 工作，但不幸的是我没有看到资源的任何变化。请帮忙。我做错了什么还是什么？

I have an angular2 app structure with 4 sub-apps that require some common configurations.These sub-apps are independent of each other. I am using webpack for dynamic loading and code splitting. Each sub-apps will have their own js files once they will be converted from .ts files. I want to bundle js files respective to the loading of sub-apps by the browser client.

E.g.
App-1 ===> app1.js

App-2 ===> app2.js

App-3 ===> app3.js

App-4 ===> app4.js

Now If browser client wants to load App-1 then only app1.js will bundled and sent to the client. This will improve app performance by not loading the unneccessary js modules.

Is there any way to acheive the same using webpack?

Thanks in advance.

使用 Webpack 之类的工具，我们可以启用代码拆分，并且仅在需要时异步加载我们的应用程序代码。

在带有 react-router 的 react 应用程序的上下文中的示例。

Webpack 等到需要代码才能发起请求。

我的问题是，一旦基本应用程序代码加载，我们是否可以开始加载其余代码，甚至在用户开始转换到新路由之前？

我的观点是，这将阻止用户等待 webpack 块下载。

我希望这是有道理的

我想使用 webpack 提供的代码拆分功能来创建我的应用程序的几个包，使用 typescript 开发，并按需加载它们。我一直在网上寻找解决方案，我找到的最接近的答案是这个： https ://github.com/TypeStrong/ts-loader/blob/master/test/execution-tests/babel-codeSplitting /require.d.ts

这个例子直接取自官方的 ts-loader 文档，它展示了如何依赖 require.ensure 来创建一个分割点。

让我烦恼的是打字稿中没有直接的方法可以做到这一点。require.ensure 函数必须在 typescript 中直接调用。需要提供以下声明文件以允许 typescript 静默消化该调用：

有没有更优雅的方式来达到同样的效果？

我正在 GWT 中创建一个应用程序，我最近刚刚在那里实现了代码拆分。我将应用程序大小从 1.1MB 减少到 570kB，这很好，因此应用程序的启动时间现在更快（我们使用的是特殊服务器，其中 500kB 确实很重要......虽然对我的问题并不重要......）。应用程序启动后（换句话说，用户可以看到登录页面，可以登录并使用应用程序的基本部分），我想下载其余的片段。

我知道当需要片段中的代码时会下载片段。但是其中一个片段大约是 300kB。因此，当我在我的应用程序菜单中单击一个项目时，会导致该片段被下载，在用户得到响应之前会有一个非常明显的延迟（1 - 2 秒）。

现在我知道这很可能只发生一次，然后片段将被缓存一年，因此下次加载速度会更快。但是例如当我在另一台设备上再次尝试时，我将不得不再次下载片段。

我只需要确定，当用户使用 wifi 在手机/平板电脑上启动我的应用程序，然后断开 wifi 连接或超出其范围时，即使他没有，他仍然能够启动片段中的代码当他仍然连接到服务器时，不要启动导致下载它们的东西。

现在他必须打开 3 个菜单项，才能下载所有令人讨厌的片段。

简而言之：
我希望我的初始下载保持 570kB，并尽快在后台下载应用程序的其余部分（如果可能的话）。

编辑：我发现http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html#sequence您可以在其中设置初始加载顺序，所以我想这就是我要找的。不确定它们是否是异步加载的，因为在下载片段后会出现登录屏幕。

假设我有一个 webpack 配置使用 memory-fs 作为 outputFileSystem 并且目标是节点。在代码的某处我使用 require.ensure 来拆分代码。在这种情况下，当我尝试要求该模块时，它会尝试在磁盘中找到该模块并抛出“模块未找到错误”。我想要的是，也需要从 memory-fs 加载拆分模块。我找不到适合这种情况的任何合适的加载器或插件。所以，我会创建我自己的。但我无法决定是否需要 webpack 插件或加载器？

谢谢