预算错误：超出初始 es2015 的最大预算

如果你在使用 ES6/ES2015 开发 JavaScript 应用程序时遇到了以下错误：

预算错误：超出初始 es2015 的最大预算.预算 5 MB 未满足 221 kB 总共 5.22 MB

那么你可能已经花费了很多时间来编写一些代码，但是在编译时，webpack 却报告这个错误。这是因为 webpack 为 JavaScript 运行时设定了一个默认的最大预算，如果你的应用程序超出了这个预算，它就会抛出这个错误。

如何解决预算错误

有几种方法可以解决预算错误：

1. 增加预算

你可以在 webpack.config.js 文件中增加预算，例如：

module.exports = {
  // ... other configuration ...
  performance: {
    maxAssetSize: 1000000,
    maxEntrypointSize: 1000000,
  },
};

这里将预算增加到了 1 MB，并设置了两个选项：maxAssetSize 和 maxEntrypointSize，它们分别限制单个资源文件和入口点文件的大小。

2. 分离代码

你可以将公共代码或第三方库的代码分离成单独的文件，例如使用 splitChunks 插件：

module.exports = {
  // ... other configuration ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

这将生成多个文件，其中包含应用程序代码和公共代码。通过分离代码，你可以减小每个文件的大小，以便在不超出预算的情况下编译应用程序。

3. 懒加载

你可以使用懒加载技术，这种技术可以在应用程序运行时按需加载代码。这样可以避免在应用程序启动时加载所有代码，从而减小启动时间和文件大小。例如：

const handleClick = async () => {
  const module = await import('./module.js');
  module.doSomething();
};

这将按需加载 module.js，而不是在启动时加载。如果你的应用程序有很多代码，懒加载可以显著减小文件大小。

总结

预算错误是因为你的应用程序超出了 webpack 的默认预算。你可以通过增加预算、分离代码和懒加载等技术来解决这个问题。无论你选择哪种方法，都需要谨慎考虑，以确保在减小文件大小的同时不会影响应用程序的性能和可维护性。