详解webpack4之splitchunksPlugin代码包分拆

下面是“详解webpack4之splitchunksPlugin代码包分拆”的完整攻略：

1. splitchunksPlugin是什么

SplitchunksPlugin是webpack4中的一个插件，用于将代码块分离成不同的文件，以实现优化性能和减小代码体积的目的。

2. 配置示例

让我们在webpack.config.js文件中创建一个新的optimization对象并为其添加splitChunks选项。它的最小配置如下：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
    },
  },
};

在上面的示例代码中，我们仅仅指定了chunks选项，这指定了webpack只在异步加载时分离代码块，这是唯一的条件。实际上，这个示例并不会生成额外的chunk。

我们还可以添加其他的选项来进一步调整splitChunks行为以及生成的代码块数量。比如，我们可以指定minSize选项以限制允许分割的最小文件大小。我们还可以设置maxSize选项以指定允许的最大文件大小。

下面是一个更完整的splitChunks示例：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        }
      }
    },
  },
};

3. 示例说明

示例1：基本示例

我们首先来看一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>SplitChunksPlugin示例1</title>
    <script src="app.js"></script>
    <script src="vendor.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

在上述示例中，我们已经通过script标签在页面上嵌入了两个JavaScript文件：

app.js 包含我们自己的代码
vendor.js 包含所有第三方库和框架

这个示例很简单，但是我们可以使用webpack的splitChunks插件将这两个JavaScript文件分开来。

我们可以在webpack.config.js中使用以下代码：

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

这个示例中，我们指定了all选项，这意味着webpack将尝试将所有公共模块分离出来并创建新的chunk。我们可以运行webpack并看看生成了什么文件：

$ npx webpack

这里我们得到两个新的文件：vendors~app.js和app.js。

vendors~app.js包含所有的第三方库和框架。
app.js包含我们自己的代码。

我们可以从HTML页面中删除vendor.js标签并替换为新生成的vendors~app.js和app.js标签：

<!DOCTYPE html>
<html>
  <head>
    <title>SplitChunksPlugin示例1</title>
    <script src="vendors~app.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

现在，我们已经成功地使用splitChunks插件将公共模块分离出来并作为新的chunk生成了一个文件。

示例2：使用cacheGroups选项

我们已经看到了通过简单地配置splitChunks选项，我们就可以将多个JavaScript文件分离成更小的文件。但是，在实际的项目中，如果我们需要更细粒度的控制，例如将所有符合特定条件的文件分离出来并创建一个新的公共模块，我们需要使用cacheGroups选项。

让我们使用optimization.splitChunks.cacheGroups选项来匹配所有在node_modules目录下的文件，并以vendors命名新的chunk，并设置优先级较高，以便尝试优先使用这个chunk，而不是默认的“commons”chunk。

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

重新运行webpack命令，我们可以看到新生成的文件：vendors.js和app.js

$ npx webpack

我们可以修改HTML页面，并使用新的文件名：

<!DOCTYPE html>
<html>
  <head>
    <title>SplitChunksPlugin示例2</title>
    <script src="vendors.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

现在vendors.js已经包含了我们选择的所有第三方依赖库，并且只有在需要的时候才会被加载，这可以显著提高性能。

以上就是详解webpack4之splitchunksPlugin代码包分拆的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解webpack4之splitchunksPlugin代码包分拆 - Python技术站