问题标签 [code-splitting-async]

我在我的反应应用程序中启用了基于路由的分块。

我用过require.ensure

我的应用程序包含两条路线/home和/pro

这是我的route.js

Webpack 识别require.ensure并为 /home 和 /pro 创建一个单独的块

Home.js和ProHomejs对应。

现在的问题是，当我打开/home时，它​​应该只加载Home.js（/home 的块），但它也会加载ProHome.js。

如果是这种情况，那么使用基于路由的分块没有好处吗？

有没有更好的方法来路由基于分块？请指出正确的资源

My bundle size was around 2MB uncompressed and 400kb compressed

This bundle was created using webpack 1.15.0.

And the film strip is like this

This is the Webpackanalyzer output

Then i have updated webpack to 2.6.1 and enabled code spliting and moved all third party js to vendor.js, Now bundle.js was containing only my app's code.

My bundle size is like this

This is the uncompressed size.

But the load time increased to 7.09s

Then we tried chunking based on routes. using require.ensure. We thought the bundle which 1.75mb will be broken into small chunks based on routes. But each route's chunk was much bigger than expected. And the sum of the total routes chunk is more than the bundle.js size

Here is the final result after enabling route based chunking

As you can see bundle.js is reduced from 1.75MB to 180kb.

As I can see from WebpackBundle Analyzer , Each chunk has its node_modules inside each chunk. This node modules are same for all the chunks.

This is the comparision of two routes..

Is there any way to reduce the chunk size of each route ?

I am using CommonChunkPlugin.

我有带有代码拆分、延迟加载和动态导入的模块系统。每个模块都是一个 git 存储库，它们在 shell（显示模块的 shell）中导入。我想部署一个模块更改而不重建。有谁能告诉我解决方案吗？

当我转到链接“/moduleA”时，我正在加载 0.bundle.js 当我转到链接“/moduleB”时，我正在加载 1.bundle.js

我可以moduleA在没有重建moduleB和外壳的情况下更新吗？

阅读这篇文章后，我尝试使用react-code-splitting来拆分我的 JavaScript 包。

PageRouter.js

Webpack 开发服务器错误

这似乎只是一个语法问题？

我已经做了很多搜索，也许我的 Google-fu 让我失望了，但我似乎无法找到以下问题的答案：

我们使用带有 TypeScript 类的模块，并且一切正常，直到我尝试在 webpack 中实现代码拆分。

如果我有这个：

我想对它进行代码拆分，所以我试试这个：

webpack 可以很好地打包它，但我没有得到代码拆分。

那我试试

此代码拆分，但 MyClass 现在没有输入，我在编辑器/ide 中丢失了任何类型知识。

我觉得我错过了一些简单的东西，但我无法解决。

非常感谢帮助。

更新 #1 - tsconfig

我有一个带有反应路由器 v4、webpack 4 的标准 React-Redux 应用程序，我正在尝试通过可加载组件库执行组件的延迟加载，因此 webpack 可以创建块并按需加载它们。问题似乎总是在Dashboard内部渲染（参考下面的代码）组件<Switch>，无论路线如何。

我不明白原因。我发现了一个类似的问题：React-Router v4 渲染错误的组件但正确匹配，但它遵循不同的模式，我不能或不明白如何将该解决方案应用于我的问题。

我正在发布主 AppContainer 和路由文件：

AppContainer.js：

路线/index.js：

对于任何好奇的人，这里是PrivateRoute组件：

如果我删除了if (_DEV_)routes/index.js 中的块，并且总是像“else”块一样做，一切正常，但是我失去了 HMR，这意味着我必须刷新浏览器才能看到代码更改生效。

编辑

对于任何徘徊历史道具来源的人：主应用程序入口点（在 webpack.config.js 中）。src/main.js：

createStore.js：

我正在尝试使用react-loadable在反应路由器 v4 中进行代码拆分。我打算实现的是不要用加载组件替换当前视图，而是保留当前呈现的任何内容。并仅更改当前加载的组件的状态。有没有办法使用 react-loadable 来实现这一点。或者可能有不同的图书馆。

export default connect(mapStateToProps, mapDispatchToProps)(LoaderStripComponent);

我希望这个 LoadableStrip 呈现以前加载的组件，直到导入承诺得到解决。

我是 vuejs 的新手，我想将 nprogress 与 vuejs 代码拆分功能一起使用。基本上我在使用导航到页面时想要 nprogress。要求是在组件承诺无法解决之前显示进度。如何在我的应用程序中添加此功能？

这是我的代码：

我已经开始使用一些import()像这样的动态语句

问题是 Webpack 为此生成了 2 个新块：（chart.js几乎是空的）和vendors~chart.js（实际上包含了我期望在一个新块中的所有内容）。

我的配置没有什么花哨的。我只调用了一个命名条目client，这是我在使用动态要求之前唯一的捆绑包。开发和生产模式都会发生这种情况。我正在使用 Webpack 版本。4.8.1

任何想法如何实现一个新的块？我不希望客户提出 2 个请求而不是 1 个。

我正在使用反应路由器、webpack 和动态导入为反应应用程序创建代码拆分解决方案。这个想法是将所有路由和相应的组件映射到不同的应用程序上下文并根据应用程序上下文拆分代码。当用户访问某个路由时，相关应用上下文的整个代码块正在被加载。

代码示例：

应用程序.tsx：

组件加载器.tsx：

因此，当我切换到不同的路线时，我可以正确看到所有组件，并且代码拆分也可以正常工作。

问题是：当反应上下文中的数据更新时，ScreenList示例中的组件不会更新。当我ScreenList直接通过反应路由器时，Route一切正常。所以问题出在我ComponentLoader用于代码拆分的组件中。

任何想法可能是什么原因？

更新： Alrite，我现在发现：如果我将我的包装ComponentLoader在一个 HOC 中，该 HOC 从上下文（如）注入一些数据export default withRouter(ComponentLoader)，一切正常，组件按预期重新呈现。为什么会这样？