webpack performance 出现 The following asset(s) exceed the recommended size limit 解决办法-JavaScript中文网-JavaScript教程资源分享门户

在我们使用 webpack 进行前端开发时，经常会遇到以下警告信息：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance.

这个警告表示我们的某些资源文件大小超过了 webpack 的默认配置值（默认为 244 KiB），如果我们不做处理，这些超大的资源文件对网页性能会产生很大的影响。那么该如何解决这个问题呢？下面我们就来深入探讨一下。

优化的方法

减小资源文件的体积

理论上来说，最根本的优化方法就是减少资源文件的体积，使其不再超过 webpack 的默认配置值。我们可以从以下几个方面入手：

压缩资源文件：webpack 可以使用 UglifyJSPlugin 插件对 JavaScript 文件进行压缩，使用 cssnano 插件对 CSS 文件进行压缩，使用 imagemin-webpack-plugin 插件对图片文件进行压缩等等。这些插件可以有效地减小资源文件的体积。
精简代码：在代码中删除冗余的、不必要的部分，如注释、空格、不必要的逻辑等等，也可以减小资源文件的体积。
舍弃不必要的功能：对于一些不必要的功能和插件，可以先将它们删除或注释掉，再进行后续的优化和测试，减小资源文件的体积。

分割资源文件

由于我们项目中可能会使用到很多第三方的库文件，这些文件通常都比较大，而且我们的某些代码也可能会因为写法原因变得很大，这些超大的资源文件都会导致警告信息的出现。解决这个问题的方法就是将资源文件进行分割，即将超大的资源文件拆成多个小文件，以减少单个文件的体积。

我们可以使用 webpack 的 optimization 配置项中的 splitChunks 参数来实现资源文件的分割。比如：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

这个配置表示将所有的依赖项都进行分割，并且使用默认的配置项，即公共代码和第三方代码分别进行分割。

示例代码

接下来，我们就使用一个示例代码来演示如何实现分割资源文件。

首先，我们先在项目中引入了两个超大的资源文件 main.js 和 vendor.js，这两个文件都超过了 webpack 的默认配置值。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack Performance</title>
</head>
<body>
    <h2>Hello, Webpack!</h2>
    <script src="vendor.js"></script>
    <script src="main.js"></script>
</body>
</html>

我们的 webpack.config.js 配置文件如下：

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

这个配置文件中，我们使用 entry 指定了两个入口文件 main.js 和 vendor.js，这两个文件都会在打包后生成。

接下来就是执行打包命令，使用 webpack 进行打包，生成优化后的文件：

$ webpack

打包完成后，我们可以查看生成的 dist 目录中的文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack Performance</title>
</head>
<body>
    <h2>Hello, Webpack!</h2>
    <script src="vendors~main.js~vendor.js"></script>
    <script src="main.js"></script>
</body>
</html>

可以看到，我们的 vendor.js 文件已经被分割成了 vendors~main.js~vendor.js 和 main.js 两个文件，并且它们的总体积小于默认配置值了，这样就避免了警告信息的出现。

总结

在前端开发中，使用 webpack 进行打包是一种非常常见的方式，而打包时会出现所谓的 “The following asset(s) exceed the recommended size limit” 的警告信息，这时我们需要对资源文件进行优化以达到最好的性能和体验。优化方法主要包括减小资源文件的体积和分割资源文件两种途径，我们需要结合项目的实际情况进行选择和实施。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6533b9617d4982a6eb74c01a