问题标签 [webpack-splitchunks]

我们正在使用 webpacksplitChunks来捆绑共享包，现在我们在模块上做了树摇动。（我们的图标、ui 组件、钩子和助手都是 npm 包）。

问题是，我们的包是完全可摇树的，但splitChunks我们所有的包都被视为vendor~main.js并导入而没有任何摇树。

摇树只对本地进口有效吗？我们应该如何对 npm 包同时使用 tree shaking 和 splitChunks？

我们的电子商务平台已经投入生产，但我们遇到了奇怪的 ChunkLoadError。此错误随机发生，不可复制。当我们试图打开失败的文件时，它就在那里并且可以正常加载。

如果用户得到这个错误，他会得到白屏（逻辑上），但刷新后一切都很好。

我们正在 React（最新）、Express（最新）上运行 SSR 电子商务

我们的 webpack / razzle 配置

多个错误

这是随机挑选的痕迹

在 Docker中部署我的应用程序的新版本后，

我看到console以下错误会破坏我的应用程序：

在此屏幕截图中，缺少的源称为：10.bbfbcd9d.chunk.js，该文件的内容如下所示：

发生此错误是因为：

1. 在每个版本中，我们都会构建一个仅包含最新版本的块Docker的新图像
2. 一些客户端正在运行一个过时的版本，并且由于（1） ，服务器将无法解决旧块

块是.js由 生成的文件，有关更多信息webpack，请参阅代码拆分

重新加载应用程序会将版本更新到最新版本，但对于所有使用过时版本的用户，它仍然会破坏应用程序。

我尝试过的一个可能的解决方法是刷新应用程序。如果服务器上缺少请求的块，如果对.js文件的请求以通配符路由结束，我将发送重新加载信号。

通配符服务于index.htmlWeb 应用程序，用于在用户刷新其页面的情况下将路由委托给客户端路由

这似乎是一个糟糕的修复，尤其是在 Android 版 Google Chrome 上，我看到我的应用程序在无限循环中刷新。（是的，这也是一个丑陋的修复！）

由于它对我的最终用户来说不是一个可靠的解决方案，因此我正在寻找另一种方法来在用户客户端过时时重新加载应用程序。

我的 Web 应用程序是使用 构建webpack的，就像它是一个create-react-app应用程序一样，分布式构建目录包含许多.js块文件。

这些是我在 webpack issue tracker 上获得的一些可能的修复，一些是由 webpack 创建者自己提供的：

• 不要删除旧版本。 <= 我正在构建一个 Docker 映像，所以这有点挑战性
• 捕获import()错误并重新加载。您也可以通过在__webpack_load_chunk__某处打补丁来全局执行此操作。 <= 我没有得到那个补丁或在哪里使用import()，我不是自己制作这些块，它只是一个生产功能
• 让服务器发送window.location.reload(true)不存在的 js 文件，但这是一个非常奇怪的 hack。 <= 它使我的应用程序在 chrome android 上循环重新加载
• 不要为.js请求发送 HTML，即使它们不存在，这只会导致奇怪的错误 <= 这不能解决我的问题

相关问题

• https://github.com/webpack/webpack/issues/10792
• https://github.com/webpack/webpack/issues/7502

如何实施可以防止此错误的解决方案？

我正在尝试从 Webpack 3 迁移到 4，这需要我从使用 CommonsChunkPlugin 更改为 splitChunks。但我正在努力保持相同的行为。

我的 Webpack 3 代码：

webpack.config.js

和

我认为 Webpack 称之为Explicit Vendor Chunk。

我应该编写什么 Webpack 4 代码来产生与上述相同的行为？

我尝试删除

但它不仅有效。

我尝试遵循https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693但它也不会产生相同的行为。

我想创建一个自定义块并附加在生成的 index.html 中。我使用创建了一个自定义项目vue create .并添加了一个vue.config.js文件。

vue.config.js

我有一些实用程序函数src/utils/test，我想在其中创建一个单独的包并附加到 index.html 中。像这样

但是在生成的 index.html 文件中，它没有为 utiltest 创建块，它只有这 2 个

注意：我正在从 main.js 中的 utils/test 导入函数，例如

如果以下配置使用 nodeExternals，则无法生成公共块，我的问题是如何在使用 nodeExternals 时对供应商代码进行分块？

webpack.config.js

我正在将继承的 Webpack 配置从 v.3.8.1 升级到 v4.43.0，并且在最新版本中遇到了异步加载块文件的奇怪问题。我的 Webpack 输出目录结构如下所示：

在 v3.8.1 中，我有一个供应商捆绑包，/static/webpack/scripts/vendor.js它从static/webpack/<chunkname>.splitbundle.js. 但是，当我更新配置并将 Webpack 版本升级到 v4.43.0 时，供应商捆绑包会尝试从webpack/<chunkname>.splitbundle.js. 不知何故，早期版本的 Webpack 能够动态发现（据我所知）static块的前缀，但最新版本不能。我不知道如何配置 v4.43.0 来复制这种行为。

v3.8.1 Webpack 配置：

v4.43.0 Webpack 配置：

我将 webpack 从版本 2 升级到版本 4。我的配置包括：

和

在版本 2 中，我的输出是简单的App-bundle.jsand Main-bundle.js，但在 webpack@4 中，输出是

没有要导入的中心、非散列文件名。

编辑：

我的optimization对象如下所示：

- - 问题 - -

我可以有块，但我如何配置 webpack 4 以便有一个简单调用的中央条目文件Main-bundle.js并且App-bundle.js我可以轻松地导入我的 HTML 模板？

我使用 SplitChunksPlugin 将所有供应商 JSvendor/和node_modules/文件夹移动到一个单独的文件中：

我还使用 MiniCssExtractPlugin 来编译我的 SCSS 样式并将其移动到一个单独的文件夹中。

他们两个一起创建了一个vendor.bundle.css我根本不需要的，因为我所有的样式都是从 SCSS 文件生成的。有什么方法可以防止它产生吗？

我有一个看起来像这样的项目：

• 应用程序.js
• 模块1.js
• 节点模块

module1 在 app.js 中通过import(/* webpackChunkName: 'module1' */ '@path').

我正在尝试配置 splitChunks 插件，以便输出：

1. 应用程序块，包括没有依赖项和包的 src 代码；
2. module1 块，包括源代码和来自 node_modules 的动态导入模块所需的依赖项；
3. 供应商块，包括来自 node_modules 的其余依赖项；

最好的方法是什么？该应用程序有一个条目，即 app.js