什么是 ChunkLoadError
当使用 Webpack 打包应用程序时，Webpack 会将应用程序分割成多个代码块 (Chunk)。每个代码块都包含应用程序的一部分，它们可以在需要时被异步加载，以优化页面加载速度。但是，如果某个代码块不能被正确加载，就会出现 "ChunkLoadError" 错误。
常见原因
1. 网络问题
Webpack 会将应用程序的代码块分割成不同的文件，并在需要时异步加载它们。如果网络连接不稳定，文件加载可能会失败，导致 "ChunkLoadError" 错误。
2. 协议不匹配
如果父页面使用 HTTPS 协议打开，而子页面使用 HTTP 协议加载代码块，就会出现 "ChunkLoadError" 错误。
3. 文件名问题
如果两个代码块使用相同的文件名，就会出现 "ChunkLoadError" 错误。
解决方法
1. 检查网络连接
如果出现 "ChunkLoadError" 错误，请确保您的网络连接稳定并且没有中断。可以使用浏览器的开发人员工具来查看加载失败的代码块，并查看失败的原因。
2. 确保正确的协议
如果您的应用程序使用 HTTPS 协议，请确保所有代码块都使用 HTTPS 加载。您可以通过在 Webpack 配置中添加以下选项来告诉 Webpack 使用 HTTPS：
output: {
publicPath: 'https://cdn.example.com/'
},3. 使用唯一的文件名
如果两个代码块使用相同的文件名，就会出现 "ChunkLoadError" 错误。您可以通过在 Webpack 配置中添加以下选项来为每个代码块使用唯一的文件名：
output: {
filename: '[name].[hash].js',
},这将为每个代码块生成一个唯一的哈希值文件名。这样就可以避免文件名冲突，从而避免 "ChunkLoadError" 错误。
示例代码
以下是一个示例 Webpack 配置，该配置可以避免 "ChunkLoadError" 错误：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- ------------------
--
------- -
--------- --------------------------
----------- ---------------------------
--
------------- -
------------ -
------------ -
------- -
----- -------------------------
----- ---------
------- ------
--
--
--
--
--在这个示例中，我们使用唯一的文件名来避免文件名冲突，并设置 publicPath 来确保所有代码块都使用 HTTPS 加载。我们还使用 optimization.splitChunks.cacheGroups 来将第三方依赖库打包成一个代码块，并命名为 "vendor"。
结论
"ChunkLoadError" 错误可能会影响应用程序的性能和用户体验。在开发和部署应用程序时，您应该避免出现这种错误。通过检查网络连接、使用正确的协议和文件名，您可以避免大部分 "ChunkLoadError" 错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c9f079babaf620fb19be4