webpack 打包报错之 Lazy loading chunks failed-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 webpack 打包是非常常见的步骤。webpack 常用于将多个静态资源（如 JavaScript、CSS、HTML 等文件）打包成单个文件，以便于在网页上加载和运行。然而，在打包过程中，我们可能会遇到各种错误和异常，其中之一就是 Lazy loading chunks failed。

什么是 Lazy loading？

在 webpack 中，Lazy loading 是指使用 import() 动态导入模块或组件。这个功能可以让我们在需要用到某个模块时才去加载它，而不是在网页一开始就加载所有模块，以节省资源和加快网页加载速度。例如：

import('./module.js').then(module => {
  // ...
});

为什么会出现 Lazy loading chunks failed 错误？

当我们在使用 Lazy loading 功能时，有时会遇到这样的错误提示：

Error: Loading chunk n failed.

其中 n 表示一个数字，代表错误的 chunk 文件。也就是说，webpack 在打包时将代码分割成了多个 chunk，并将这些 chunk 放在不同的文件中。而这个错误提示表示在加载某个 chunk 文件时出现了错误。

通常出现 Lazy loading chunks failed 错误的原因有以下几种：

网络问题：可能是网络状况不良、服务器异常等原因导致 chunk 文件无法加载。
打包配置问题：可能是 webpack 的配置出现了错误，例如没有正确地设定 output.publicPath、output.chunkFilename 等选项。
模块依赖问题：可能是应用程序中的某个模块依赖了错误或不存在的文件或模块。

如何解决 Lazy loading chunks failed 错误？

下面是一些常见的解决方案：

1. 检查网络问题

一般而言，网络问题比较容易排查。我们可以尝试打开 chunk 文件的 URL，看看能否正常访问。如果不能正常访问，那么可能是网络问题。这时候可以尝试切换网络或者联系网站管理员。

2. 检查打包配置

如果网络问题排除了，那么很可能是打包配置出现了问题。我们需要检查以下几个选项是否正确设置：

// www.javascriptcn.com code example
module.exports = {
  output: {
    publicPath: '/',
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

这里需要注意的是，output.chunkFilename 和 optimization.splitChunks.name 选项的设置要保持一致：

// www.javascriptcn.com code example
const path = require('path');

module.exports = {
  output: {
    // ...
    chunkFilename: '[name].[contenthash].js',
  },
  optimization: {
    splitChunks: {
      name: (module, chunks, cacheGroupKey) => {
        const moduleFileName = module.identifier().split('/').reduceRight(item => item);
        const cacheGroup = cacheGroupKey.split('~')[0];
        return `${cacheGroup}-${moduleFileName}`;
      },
      chunks: 'all'
    }
  }
};

3. 检查模块依赖

如果前两个方案都排查过了，那么可能是应用程序中的某个模块依赖了错误或不存在的文件或模块。我们需要检查代码中所有的模块导入语句，尤其是动态导入语句，看看是否存在错误或者未定义的文件或模块：

import('./module.js').then(module => {
  // ...
});

结语

在 Lazy loading 中如果遇到报错，我们可以从网络、配置以及模块依赖三个方面进行排查。本篇文章分享了常见的解决方案，希望对大家有所帮助。在实践过程中切记多加思考和实践，以找到最佳的解决方案。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bb07ea306f20b3a6a4f0cc

webpack 打包报错之 Lazy loading chunks failed