webpack是构建和捆绑前端应用程序的强大工具，但是随着应用程序的增长，捆绑包的大小也会增加。这可能导致负载时间较慢和最佳用户体验。

提高应用程序性能的一种方法是将捆绑包分成较小的块，当用户通过应用程序导航时，可以按需加载。如果您有一个具有许多依赖项的大型应用程序，这一点特别有用，因为它可以减少加载初始捆绑包所需的时间。

在本教程中，我们将研究如何使用WebPack中的Splitchunksplugin根据大小将捆绑包分成较小的块。

设置WebPack

在开始之前，请确保您安装了以下工具：

 Node.js and npm (the Node Package Manager)

要设置webpack，为您的项目创建一个新目录，然后运行以下命令以初始化一个package.json文件：

npm init -y

接下来，通过运行以下命令来安装WebPack及其依赖项：

npm install --save-dev webpack webpack-cli

配置Splitchunksplugin

要根据大小将捆绑包分成较小的块，您需要使用Splitchunksplugin。首先，通过运行以下命令安装插件：

npm install --save-dev webpack-split-chunks

然后，将您的WebPack配置更新以包括Splitchunksplugin，例如：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      maxSize: 250000,
      chunks: 'all'
    }
  }
};

如果其中任何一个大于250kb，则此配置将使您的捆绑包分为多个较小的捆绑包。

您还可以通过在Splitchunksplugin配置中使用cacheGroups选项来指定要分为自己的捆绑捆绑的特定依赖项。例如：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
        maxSize: 250000
      }
    }
  }
}

这将在node_modules目录中提取所有依赖项，如果捆绑包大于250kb，则将node_modules目录中的所有依赖项提取到一个名为vendor.bundle.js的捆绑包中。

运行WebPack

要使用splitchunksplugin配置运行webpack，请使用以下命令：

npx webpack

使用拆分块

要在应用程序中使用拆分块，您需要将它们包含在HTML文件中。您可以使用script
来做到这一点 标记并指定块文件的路径。

例如，如果您有一个名为vendor.bundle.js
的块 包含所有供应商依赖性，您可以将其包含在HTML文件中：

<script src="dist/vendor.bundle.js"></script>

请确保在主捆绑包之前包括供应商块，因为主束需要。

您还可以使用脚本标签在需要时会异步加载拆分块。为此，您可以在脚本标签中使用async属性，例如：

<script src="dist/vendor.bundle.js" async></script>

这将允许浏览器异步加载供应商块，而无需阻止页面的渲染。

结论

将捆绑包分成较小的块可以提高应用程序的性能并提供更好的用户体验。通过在WebPack中使用Splitchunksplugin，您可以根据大小或特定依赖项轻松拆分捆绑包。

我希望本教程能帮助您了解如何在WebPack中使用Splitchunksplugin。如果您有任何疑问或评论，请随时将它们留在下面的评论中。