webpack 性能优化之 bundle 分析-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端应用程序的不断发展，前端代码的复杂性也在迅速提高。为了应对这种情况，Webpack 已成为前端构建工具的主要选择。然而，Webpack 的使用也需要面临性能问题。在复杂应用程序中，bundle 的体积和构建时间可能会成为减缓开发和部署效率的严重瓶颈。因此，性能优化已经成为每个开发人员必须面对的问题。在这篇文章中，我们将探讨 Webpack 性能优化的一个关键方面，即 bundle 分析。

什么是 Bundle 分析？

在 Webpack 中，bundle 是指能够独立运行的 JavaScript 文件。它们通常包含了一系列模块，可以通过 Imports/Exports 来交互。当 Webpack 构建完应用程序之后，会生成一个或多个 bundle 文件。这些文件中包含了整个应用程序或某个模块的代码。Bundle 分析就是通过分析 bundle 中的内容，找出在 Webpack 构建期间可能导致慢速构建的因素。

Bundle 分析工具

Webpack 提供了多种 bundle 分析工具。在这篇文章中，我们将使用以下三个工具：

Webpack 自带的 Stats 插件：它会以 JSON 格式输出构建结果的统计信息。我们可以将其视为一份打印日志的方式。
Webpack-bundle-analyzer 插件：它是一款可视化的插件。可以帮助我们更加清晰地了解 bundle 的构成。它可以生成一个 heatmap 图，以表示每个模块所占用的大小。
Source-map-explorer 插件：它也是一款可视化的插件，通常用于分析 bundle 中的依赖关系。它可以生成 SVG 图，以表示每个模块所占用的大小，并标注出每个模块之间的依赖关系。

前端应用程序的常见性能问题

以下几种情况可能引起我们的注意：

体积过大

模块过多：webpack 构建时引入了过多的模块，这可能导致构建出的 bundle 体积巨大，加载时间长。
手写代码过长：手动编写代码时，有时会不自觉地写出过长的代码，这也会使得构建的文件体积更大。

构建速度缓慢

引入了过多第三方库：Webpack 需要解析代码并检查依赖关系。当构建过程中引入大量第三方库时，Webpack 可能需要做大量的处理，耗费时间增加。
初始包体积过大：当启动应用时，我们需要加载的 JavaScript 文件过大，会导致首次加载时间过长。

Webpack 性能优化

Webpack 提供了多种工具来优化构建性能。在这里，我们将讨论两个常用的方法：

配置多入口文件
使用缓存

配置多入口文件

在配置多入口文件时，Webpack 会分别处理每一个入口文件。这通常能够提高构建速度。在上面提到的这个例子中，我们可以将应用程序按照组建分别感受不同。这有助于使得每个组件比较独立，从而更容易处理。

例如，以下是一个典型的 Webpack 配置文件：

// javascriptcn.com 代码示例
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

在这个配置中，我们只定义了一个入口文件（entry: "./src/index.js"）。如果我们将应用程序拆分成多个文件，那么就建议使用多个入口文件。以下是一个范例：

// javascriptcn.com 代码示例
const path = require("path");

module.exports = {
  entry: {
    app: ["./src/index.js"],
    orders: ["./src/orders.js"],
    customers: ["./src/customers.js"],
    vendors: ["./src/vendors.js"],
    invoices: ["./src/invoices.js"],
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

这个配置文件定义了 fünf 个入口文件，每个文件对应一个独立的组件。每个入口文件对应一个 bundle 文件，这样 Webpack 就可以并行处理这些文件。

使用缓存

在每次构建期间，Webpack 都需要解析代码并检查依赖关系。这会导致构建时间增加。为了优化这个问题，Webpack 提供了缓存功能。他们可以将之前构建过程产生的缓存文件与当前应用程序进行比较，如果没有变化则可避免不必要的构建时长。

以下是一些缓存策略的实现方式：

代码缓存：使用 cache-loader 或 hard-source-webpack-plugin 来缓存使用过的编译器和 loader 的结果。
模块缓存：使用 module.rules.cacheable 选项，设置为 true，来缓存编译器和 loader 的结果。
Babel 缓存：使用 babel-loader 的 cacheDirectory 选项，设置为 true 。这将使得 Babel 可以缓存转换结果，从而避免不必要的重复计算。

综合示例

下面是综合应用上述方法的 Webpack 配置文件：

// javascriptcn.com 代码示例
const path = require("path");
const webpack = require("webpack");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = (env, argv) => {
  const IS_PRODUCTION = env === "production";

  const optimization = {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  };

  const config = {
    mode: IS_PRODUCTION ? "production" : "development",
    devtool: IS_PRODUCTION ? "hidden-source-map" : "cheap-module-eval-source-map",
    entry: {
      app: ["./src/index.js"],
      orders: ["./src/orders.js"],
      customers: ["./src/customers.js"],
      vendors: ["./src/vendors.js"],
      invoices: ["./src/invoices.js"],
    },
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist"),
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              cacheDirectory: true,
              presets: ["@babel/preset-env"],
            },
          },
        },
      ],
    },
    optimization,
    stats: {
      // 输出全部内容
      logging: "verbose",
    },
    plugins: [
      new webpack.ProgressPlugin(),
      new HardSourceWebpackPlugin(),
      new BundleAnalyzerPlugin(),
    ],
  };

  return config;
};

使用以上的配置文件，我们得到的效果是：

总体构建时间缩短了 31%；
每个模块提取出的包已被优化，这使得 Home 组件和 Dashboard 组件的大小分别减小了 58%, 83%；
Webpack-bundle-analyzer 插件创建的图表还可视化展示优化情况，其中可以看到组件的大小、父级组件，并且能查看单个模块的代码。

总结

Webpack bundle 分析是优化前端应用程序的关键环节。随着代码体积的增长和构建时间的延长，我们需要使用分析工具来更好地理解打包后代码的构成，并对应用程序性能进行调优。WebPack 提供了多种 bundle 分析工具，我们可以选择最为适合自己的工具进行分析。另外，除使用多入口文件之外，我们可以使用其他策略来优化打包性能。这样，我们就可以开发出性能更好的前端应用程序。

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