webpack4 多页面项目构建的若干精妙思路

2023-11-04 03:23:09

多页面项目中优化 webpack4 的精妙思路

在多页面项目中，优化构建过程至关重要，可以提高构建速度和优化项目性能。本文将深入探讨 webpack4 中提高多页面项目构建效率的三种精妙思路：多线程构建、提取公共代码和使用代码分割。

多线程构建

webpack4 支持多线程构建，这可以显著提升构建速度。启用多线程构建非常简单，只需在 webpack.config.js 文件中添加以下配置即可：

module.exports = {
  ...
  devServer: {
    ...
    parallel: true,
  },
  ...
};

这将允许 webpack 在多核系统中并行处理多个模块，从而大幅缩短构建时间。

提取公共代码

在多页面项目中，通常有很多页面共享相同的代码，例如导航栏、页脚和侧边栏。为了避免重复构建这些代码，我们可以使用 webpack 的代码提取功能。

要提取公共代码，我们需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  ...
  optimization: {
    ...
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
        },
      },
    },
  },
  ...
};

这将创建一个名为 "vendor" 的单独代码块，包含所有来自 node_modules 文件夹的公共代码。这样，每个页面都可以引用这个单独的代码块，从而避免重复加载。

使用代码分割

代码分割是一种将大型 JavaScript 文件拆分成多个较小文件的技术，在需要时加载这些文件。这可以减少初始加载时间并提高页面性能。

要使用代码分割，我们需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  ...
  optimization: {
    ...
    splitChunks: {
      cacheGroups: {
        ...
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
        },
        async: {
          test: /[\\/]node_modules[\\/]/,
          name: "async",
          chunks: "async",
          minChunks: 2,
        },
      },
    },
  },
  ...
};