问题标签 [webpack-splitchunks]

我正在尝试使用 React.lazy() 来减小我们主要的 webpack 包的大小。我延迟加载的组件已成功拆分为自己的 js 块，在需要时按需下载。

但是，延迟加载组件的依赖项仍然包含在主 js 包中。这是预期的行为吗？如何正确地将延迟加载组件的依赖关系拆分为它们自己的块或包含在延迟加载组件的块中？

这是我在 React 应用程序中使用的一些代码。我的路由是使用react-router-config编写的，这使我可以保持集中的方式，因此我总是知道去哪里以便修改或添加一些。

然后，假设 Child 组件是动态导入的：

我希望生成的块包括 Child、它的导入/依赖项和 GrandChild 及其导入/依赖项；但实际情况是，输出是一个很小的 ​​(1kb) 文件，其中仅包含该组件 (Child) 的行。

我怎样才能让 webpack 块对/child/:id路由很重要？

我正在尝试在 Webpack 4 应用程序上使用 SplitChunks，但我看到“未定义窗口”。我正在尝试让我的 SSR 捆绑包不被分块或以任何方式受到分块的影响，但它不起作用：

问题是，我的服务器包的第一行是：

这导致我的 SSR 执行失败。

基于我刚刚找到的https://webpack.js.org/configuration/output/#outputjsonpfunction，我认为我需要以某种方式将输出目标更改为nodefromweb我的服务器包。我还不确定该怎么做。

我正在尝试制作一个库（使用 typescript 和 webpack）。该库旨在供不同的角度应用程序使用。

每个应用程序可能不会使用相同的功能集，因此使用 webpack 的entry. 现在，该库被拆分为 (say) main.js、func1.js、func2.js等。在这里，main.js是应用程序必须使用的最小库以及一个或多个所需的功能库（消费组合基于应用程序）。我实现了预期的拆分，但公共模块在每个块中都重复，导致应用程序大小增加。

为了避免重复，我使用了 webpack 的optimization.splitChunks，如下。

该选项避免了重复并创建了一个名为 的新文件，common.js其中包含所有常见模块。

现在，我需要将common.js它与main.js（我们的第一个块，一个必须使用的块）合并，而不是它是一个单独的文件。这是可以实现的吗？如果是这样，怎么做？

我有一个与How to config webpack - libraryTarget + splitChunks + requaire in borwser类似的问题。我写了一个 npm 插件并通过 webpack 编译它。接下来，我将它安装在 Nuxt 项目中，并在（例如）index.vue 中添加到这个 npm 插件的导入。插件 src 文件看起来像

等如果我不使用 splitChunks 一切正常（import { Tools } from 'libs/dist/.../tools'），但使用 splitChunks 我有 undefined/1/end 循环加载 Nuxt 应用程序/空模型等。

如果没有 runtimeChunk，我认为我只需要从“libs/dist/.../tools”导入（例如）工具，并且将加载工具的所有块。Tools2 等也是如此。对于 runtimeChunk，我认为我必须从运行时导入，import { Tools } from 'libs/dist/.../runtime'但不......两个导入都不起作用。那么，可以从另一个 webpack 包中导入拆分文件吗？

我发现的类似问题：
Dynamic Module Import with its own chunk dependencies
Importing/loading library with chunks

我正在使用 webpack 对旧式多页 ASP.NET Web 窗体应用程序进行现代化改造。在我尝试使用SplitChunksPlugin使用它的chunks: 'all'选项对我的包进行重复数据删除之前，我已经取得了相当大的成功。不幸的是，这使得一些额外的 JS 包都需要script与原始条目包一起包含在标签中。毫不奇怪，上面链接的文档说明了很多：

默认情况下 [插件] 仅影响按需块，因为更改初始块会影响 HTML 文件应包含以运行项目的脚本标记。

但我非常希望将这些初始条目块拆分，因此我试图找到一种方法将所有这些额外的块包含在脚本标签中。似乎这里的标准建议是使用HtmlWebpackPlugin生成包含所有脚本标签的 HTML 页面，但这对我不起作用（至少在其默认配置中）至少有两个原因：

1. 这是一个 Web 窗体项目。不简单地篡改 aspx 文件。
2. 即使我确实找到了每次运行 webpack 时生成一些有效的 aspx 文件的方法（我想这是可行的，但这是主要困难）；似乎 HtmlWebpackPlugin 只为所有块生成脚本标签，或者手动选择它们的子集（使用chunks: []选项）。

为了详细说明第二点，并回答我的问题——我可以对拆分块进行一些手动分析以构建依赖关系图并手动将每个块包含在 aspx 中，但这显然不是一种可维护的方法。我希望 HtmlWebpackPlugin 可以提供某种方式，至少表明该块最终由该条目使用，或者该条目使用这些块等，但我没有发现其输出中存在任何此类关系。

有没有办法不通过 h​​ack-hoops 自动确定哪些拆分块是给定条目块的依赖项？

我正在尝试使用 Webpack 4 在 Vue JS 应用程序中拆分我的供应商块。使用此设置我已经能够获得合理的结果：

但是我在文档中找不到任何解释 maxSize 的数字代表什么的内容。是字节、KB 还是任意数字？如果不了解数字的含义，就很难“猜测”我的应用程序的正确值是多少。

另外，它是预先缩小的尺寸还是压缩后的尺寸？

现在我正在做：

firebase.js

webpack.config.js

我从这篇文章中得到的webpack部分：

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

这导致了这个667kb 的小JS 文件（这是生产版本）：

问题

我可以以其他方式导入它，以便最终得到更小的块吗？

例如：

但我不知道我将如何处理这些“额外的对象”，因为我唯一需要和使用的firebase对象就是我从中得到的对象firebase/app

另外，如果我像这样导入它们并且不使用这些对象，Webpack 不会将它们解释为“死代码”并摇摇它们吗？

这样做的正确方法是什么？

我想通过以下方式使用 Webpack 拆分我的块：

每当我导入一个 NPM 包时，比如

我想要一个像这样的块：

这是我正在使用的配置：

webpack.config.js

现在，我将每个依赖项都styled-components视为不同的块。例如：下面的 3 个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块来避免多个模块需要的可能模块。

有人知道怎么做吗？

我有一个 vuejs webapp，我正在从 webpack3 迁移到 webpack4。我正在尝试更新配置以使用新的优化工具，但是当我运行它时，我的应用程序没有加载。main.js 文件存在，但它似乎没有做任何事情，并且开发工具控制台没有显示任何内容。

如果我不使用chunks: 'all'，那么我的应用程序可以工作，但是我的 js 文件很大。谁能帮我修复我的配置文件？提前致谢！

另请注意，我使用的是 aspnetcore。

我在下面显示：

1. webpackconfig.js
2. 包.json
3. 进入js文件
4. html索引文件
5. webpack 输出

这是我的 webpack 配置：

这是我的 package.json

这是我的 boot-app.js 文件，它是 webpack 条目：

这是我的 Index.html 文件

最后，这是 webpack 的输出：