问题标签 [webpack-splitchunks]

我正在将SplitChunksPluginwebpack 应用到我的服务中。

喜欢，

并且出现了一些问题。在讨论这些问题之前，我将介绍我的服务的缩小结构。

1. Web 服务带来了几个script. 例如，

（我正在使用menifest.json）

2. global.js就像_

3. main.js就像_

而已。实际结构更复杂。所以，现在是问题。

1. 当我不使用splitChunksor 设置splitChunks.chunks为async时，没有问题。但是当我将 设置为splitChunks.chunks时all，浏览器中会显示以下问题。

如果我_在浏览器的控制台中输入，则_存在。

2. 所以，为了找出发生了什么，我console.log插入global.js喜欢

何时显示console.log日志，splitChunks.chunks = 'async'但何时不显示splitChunks.chunks = 'all'。

3. 现在，我尝试导入所有供应商，例如

html 有上面的行，但是当我在 devtool 中看到网络选项卡时，没有供应商的 javascript 文件。

我很难申请，splitChunksPlugin但这并不容易......而且我找不到一点线索......

这对任何答案或想法都会有很大帮助！谢谢。

我正在使用 laravel、vuejs 开发一个 Web 应用程序，并使用 webpack mix 创建动态加载的块文件。但是当我运行 npm run watch/npm run prod 时，它会在块文件夹中创建一些带有波浪号（~）名称的错误文件夹。如何解决？

文件名错误

webpack.mix.js 文件：

动态路由组件：

我想从某个捆绑包中制作多个块，并由服务器有条件地使用它。html中是否放置某些脚本的逻辑由另一个应用程序控制，这不是问题。我尝试了可加载组件，但对我不起作用，因为他生成了糟糕的树依赖。

然后，我有：

这会生成一个没有 Header 模块代码的 clients.js，以及 header-module-A 和 header-module-B 文件，很酷。

方案 1

我在一个页面中调用clients.js、header-module-A 和header-module-B。一切都很好。

方案 2

我调用clients.js，header-module-A，但在某个页面中没有header-module-B。clients.js 文件不起作用，因为他的 header-module-b 有一个依赖项（该文件使用 checkDeferredModules 函数检查所有模块）。

此时，我找到了带有 runtimeChunk: 'single' 选项的解决方案https://github.com/webpack/webpack/issues/9629 ，这些会生成一个新的运行时文件。我此时的配置是这样的：

我已将 runtime.js 文件放在页眉，将其余脚本放在页脚，但不起作用。

新场景1

我在一个页面中调用clients.js、header-module-A 和header-module-B。标题不起作用。

新场景2

我调用clients.js，header-module-A，但在某个页面中没有header-module-B。标题不起作用。

我在做什么错？

我们正在使用 react.js 16.13.1。我们的项目有超过 250 页。使用 Webpack 构建后为 33MB。这是一个巨大的尺寸。以平均互联网速度加载需要 30 秒。我们正在使用 Webpack 4。此外，我们正在使用代码拆分。

以下规则用于 Webpack 配置。但仍然没有优化。使用Webpack Bundle Analyzer找到来自 /src 文件夹的大小

或者代替 webpack，任何其他可用于更好优化的选项。

请帮我解决这个问题。

我的文件：

page1.js

page2.js

page3.js

我得到什么：

我想要的是：

Webpack 5配置：

我需要它来轻松地将所有相关文件添加到我的 .NET MVC 页面中的脚本标记中。

<script type="text/javascript" asp-src-include="~/dist/*page1_*.js"></script>

除非有另一种解决方案，只在页面的 script 标签中添加一个 js 文件。我真的不喜欢使用HtmlWebpackPlugin和处理模板文件，而不是直接使用.cshtml文件。

<script type="text/javascript" src="~/page1.js"></script>

因为每个页面的入口文件将保持不变，而块文件将不断更改名称和数量 - 不断。

问题：如何在不解析最终包的情况下提前获取依赖块图？最好是json。

为什么：

使用 webpacks 默认的块拆分策略，它会创建多个其他块所依赖的公共块。例如两个动态导入，如

webpack 可能会重写为（不完全是，但作为一个概念）：

所以 webpack 注意到 foo 重用了 'bar' 的一部分并创建了一个 'bar.0'，其中的模块仅用于 bar 并重用了块 'bar' 中的所有内容。

当我向用户发送一个 html 页面时，我肯定知道它将需要“foo”，我想添加：

当我向我知道它需要'bar'的用户发送一个html页面时，我想添加：

就这样脚本已经在 html 解析时加载，并且在第一次执行 javascript 时不依赖额外的往返。

但是如何在不解析最终包的情况下提前获取依赖块图呢？

我有一个大的 app.js 和 vendor.js 文件，为了减小我选择将它们分成块的方法的大小。

当我运行 webpack 时，它会创建许多分块文件，但我不知道如何在刀片布局中导入它们。

我尝试在网上研究它，但我能找到的只是拆分它们的方法，没有显示如何链接这些拆分的文件。

我想到的唯一想法是读取 mix-manifest.json 文件，遍历它，然后将它们链接到刀片中，但这对我来说似乎不是一个好的解决方案。

她的我的 Webpack 配置

这就是我如何链接我以前的 JS 脚本

这些是 webpack 在我的 public/js 文件夹中创建的块

在我的 webpack 配置中，我使用的是拆分块的标准用法：

这正确地创建了一个供应商块，并将我的节点模块与我的各种 JS 入口点分离。

但是，有一个入口点使用非常有限的节点模块子集，我希望将这些节点脚本作为入口点的一部分包含在内，而不是依赖于供应商块。例如，我的构建将创建以下内容：

• 供应商.js
• script-1.js（无节点模块，依赖 vendor.js 运行）
• script-2.js（无节点模块，依赖 vendor.js 运行）
• script-3.js（包含必要的节点模块，可以独立于 vendor.js 运行）

我该如何在 webpack 中进行配置？

Webpack 配置是 Vue CLI 设置的一部分（可以使用 进行检查vue inspect）。这是其中的一个相关部分：

HTML 输出为：

和

foo根据需要拥有尽可能多的脚本标签是没有问题的，但barWidget它是应该立即加载的小部件入口点，没有初始块依赖关系。我的意图是barWidget加载一行代码（为此目的可能会禁用哈希）：

但在当前状态下，如果chunk-vendors省略，则无法加载。

我更喜欢保持vendors和common块原样，因为它们以合理的方式拆分，并且可以在入口点之间的客户端重用，但我需要barWidget自动加载它依赖的块。一种不太可取的方法是禁用块，但barWidget仅在其他入口点中的块拆分应保持不变。

一种重现它的方法基本上是一个添加了 2 个入口点的新 Vue CLI 项目，或者任何具有类似配置拆分的 Webpack 项目。

这是项目（为了完整性而列出）：

包.json

vue.config.js

公共/foo.html

公共/barWidget.html

src/foo.js

Foo.vue

src/barWidget.js

BarWidget.vue

• 是否可以通过 WebpackbarWidget强制自动加载chunk-vendors.[HASH].js，而无需在使用的地方显式加载barWidget.[HASH].js？

• 是否可以barWidget强制入口点不使用其他初始块（chunk-vendors等）并输出自给自足的barWidget.js捆绑包，而不影响拆分在其他入口点的工作方式？

• 描述的场景还有其他选择吗？

在 webpack 4 中，供应商块具有诸如 的名称vendors~main~secondary.js，它们指的是与它们相关的块。现在，在 webpack 5 中，供应商块的名称是这样的 : vendors-node_modules_react-dom_index_js.js，这真的不太可读和可理解。

关于如何在使用 webpack 5 时回到 webpack 4 的行为的任何提示？

我想我必须对 做点什么splitChunks.name，但我找不到合适的函数来做到这一点。

编辑

虽然@MrP01 的回答更彻底，并且更深入地了解了 using splitChunks.name，但这是我最终使用的一个简短片段，它让我可以回到确切的旧行为。