问题标签 [webpack-splitchunks]

我对角度生态系统很陌生。我正在使用 Sentry 服务器来跟踪我的应用程序引发的错误。不幸的是，我的 Angular 11 项目生成的 javascript 块文件太大而无法通过我的安装进行有效处理。

因此，我正在尝试使用 Angular 内置的 SplitChunksPlugin 配置 Angular 项目以不创建大于例如 200KB 的块。

基本上，如果我在“customWebpackConfig”中添加“优化”结构，这将有效。

不幸的是，这有一个缺点，即在生成我的 index.html 时，对我的 CSS 文件的引用和我的大部分 javascript 块都丢失了。

在不破坏默认行为的情况下配置 SplitChunksPlugin 的最佳实践方法是什么。

角.json

额外的webpack.config.js

有和没有优化配置的 index.html 之间的差异如下所示：

在 webpack4 中：

在 webpack 5 中：

如何使用 ChunkGraph API？我尝试以这种方式使用，

不过chunkGraph.getChunkModules(module).length === 0是真的。

我得到了这个链接

这是我的 webpack 3 配置。

它的目标是从 2 个入口点获得 5 个文件：

• 带有它使用的本地模块的入口文件 A
• 带有它使用的本地模块的入口文件 B
• 仅在 A 中使用的供应商文件
• 仅在 B 中使用的供应商文件
• 两者都使用的供应商文件

我还需要这些文件具有固定的名称，以便我可以将它们导入我的 HTML。

有一个简单的配置

几乎可以满足我的需要，除了 a）它将我的本地模块包含在“仅 A”和“仅 B”块中 b）它为它们创建动态名称

我搜索了几个小时，但找不到解决方案，也无法理解现在整个 chunks majic 是如何工作的，所以我寻求帮助。

Question

I need to exclude multiple files from webpack optimization from splitchunk plugin.

What I've tried

Result

It seems the files are not excluded.

How can achieve that?

有几个入口点：

• a
• b

共享代码要求：

• 条目中的所有内容a都应在所有其他条目之间共享

构建结果：

• a.chunk.js- 共享代码，仅包含块，没有 UMD
• a.bundle.js- UMD 捆绑包
• b.bundle.js- UMD 捆绑包

加载顺序：

• 加载b：a.chunk.js，然后b.bundle.js
• 加载a：a.chunk.js，然后a.bundle.js

我想在加载a条目时删除其他请求。

问题 - 我如何合并a.chunk.js和a.bundle.js？结果，我想收到a.bundle.js同时包含aUMD 标头和共享块的信息。

我做了一个解决方法，现在，我只是在构建后立即合并两个文件。

我认为这不是一个好的解决方案，并且可能会破坏源映射并且模块哈希将无法按预期工作。

我们正在尝试优化我们的 webpack 捆绑。现在我们生成了很多小块，但我们想根据一些规则对它们进行分组：

• 节点模块和代码应该分开，例如。一个块要么是所有 node_modules 要么是所有代码
• 每个块大小应大于 20KB
• 我有点实现文件大小限制，但最终的问题是，在第一页加载时，所有块都一次下载，我拆分文件是因为我希望它们仅在需要时才下载，而不是全部立刻。以下是我为达到这一点所做的步骤。如果你能指出我正确的方式，那将不胜感激

一、现状

设置：

你可以看到有很多小文件

2.为了了解小块的来源，我强制将异步块合并为两个，一个来自node_modules，一个来自代码

环境

没有更多的小文件，所以小文件是异步块

3.所以现在这些小文件在我控制那两个缓存组中，我尝试将它们分成更小的文件

环境

这看起来正是我想要的。只有一个问题是当我访问第一页时所有这些文件都被加载了。这在原始场景中不会发生（1.）。我怀疑这是因为我将名称强制放入 cacheGroup。但如果我不强制命名，则会生成小块

4.如果我不指定缓存组名称会发生​​什么:(

环境

是否有可能在 splitchunk 中解决这个问题？谢谢你的帮助

我有一个具有以下结构的项目：

app被定义为我的入口点，它在 Lib 目录下导入了两个模块。我还定义了一个网络工作者worker，它导入这些相同的模块。

应用程序

工人

我想导出Lib为一个通用块，供app和使用worker。因此，在 中webpack.config.js，我像这样设置splitChunks部分：

webpack.config.js

当我使用此配置进行构建时，正如我所料，会创建 Lib.bundle.js。但是，当我运行应用程序时，工作人员没有运行。如果我splitChunks从配置中删除，那么一切正常：创建工作程序，发布消息并运行日志语句。

不幸的是，我需要Lib拆分成它的大块。我怎样才能做到这一点并让我的网络工作者仍然运行？

谢谢！

使用 webpack splitchunk 时，是否可以指定您实际希望跨包复制的库？

语境：

我正在使用具有多个包和入口点的大型 monorepo。当前的 webpack 配置使用

{ optimization: { splitChunks: { chunks: "all" } } }

在 monorepo 中有多个入口点。它为 monorepo 中的每个包生成一个供应商文件，以及一个包含所有常见依赖项的大型 vendor~boot 文件，以防止每个包之间的重复。

应用程序的每个部分都将加载主要供应商捆绑包，以及与其当前所在的包相关的捆绑包。

我希望允许复制应用程序的小区域中使用了几个大型库。我不希望这些库拆分成公共块并加载到任何地方。所以基本上我想要复制某些库，据我所知，这正是 splitchunks 所阻止的。

我刚刚从 webpack 4 升级到 webpack 5，但是现在当我尝试构建我的解决方案时，它会抛出以下错误：

TypeError: chunks.some 不是函数

这是我的 webpack.config 中的行：

有谁知道这已被替换或我如何更改上述内容以使其正常工作？

我们有一个多页面React应用程序，页面是加载单个转译入口点的 ASP.NET 页面。一段时间以来，我们一直做得很好，并且编译后的条目越来越大（可以理解）。

现在我们想进行代码拆分以避免只有 1 个大文件。我尝试过optimization.splitChunks.chunks = 'all'webpack 按预期拆分块。我遇到的问题是我需要知道入口点依赖于哪些块（我不需要，因为块名称似乎是随机生成的）才能使用script标签导入。我听说插件HtmlWebpackPlugin可以生成包含所有依赖项的 HTML 文件。但是，我们使用的 ASP.NET 页面设置为仅导入已转译的入口点文件。

我的问题是是否有一个设置webpack可以使条目导入他们需要的块？或者有没有一个插件可以帮助解决这个问题？