Webpack File Limit Error

• Build

在 Webpack 的配置中，有一个 performance 选项。根据 performance 中的配置，Webpack 可以针对打包后的结果的实际大小，进行警告或报错。

具体的配置参数如下：

  • performance.hints

这个参数用于告诉 Webpack 最终产生的报告需要以什么样的方式呈现出来。可能的配置包括 false，'warning' 和 'error'。建议在 CI 中将这部分配置成 'error'，保证过大体积的文件无法被发布到线上。

而具体多大的文件算“过大”，则需要用到下面提到的两个参数：

  • performance.maxEntrypointSize
  • performance.maxAssetSize

前者表示入口文件能接受的最大文件尺寸（单位是 byte），后者表示其他生成的文件所能接受的最大尺寸（默认情况下包括了所有的 CSS，非入口 JS 文件，以及字体、图片等文件）。

比如，入口 JavaScript 文件不能超过 250kb，而其余文件不能超过 100kb：

module.exports = {
  performance: {
    maxEntrypointSize: 250_000,
    maxAssetSize: 100_000,
  }
}

默认情况下，除了 .map 文件外，所有其他产生的文件都会被考虑在内。如果希望改变这个默认的行为，可以使用下面的这个参数：

  • performance.assetFilter

比如，只考虑 JavaScript 文件：

module.exports = {
  performance: {
    assetFilter(assetFilename) {
      return assetFilename.endsWith('.js');
    },
  },
};

官方文档在这里。