WebPack 多页面应用优化：Webpack 如何进行代码分割和公共模块提取

WebPack 是一个优秀的前端构建工具，它可以将多个 JavaScript 文件打包成一个文件，从而减少 HTTP 请求次数，加快页面加载速度。但是对于多页面应用，我们需要对 WebPack 进行一些优化，以实现更快的页面加载速度。

在本文中，我们将介绍 WebPack 如何进行代码分割和公共模块提取，以优化多页面应用的加载速度。

代码分割

当我们打包多个 JavaScript 文件时，我们可以将它们分成多个文件，从而减少每个文件的大小，加快页面加载速度。这个过程被称为代码分割。

Webpack 通过 import() 语法来实现代码分割。import() 是一个异步加载模块的语法，它可以将模块分割成更小的块，这些块可以按需加载。

我们可以使用 import() 语法来按需加载模块。在下面的例子中，我们将一个模块分割成两个文件：

import('./module1.js').then(module1 => {
  // 使用 module1
});

import('./module2.js').then(module2 => {
  // 使用 module2
});

在上面的代码中，module1.js 和 module2.js 将被分割成两个文件，并在需要的时候按需加载。这样可以减少初始加载时间，提高页面加载速度。

在 WebPack 中，我们可以使用 optimization.splitChunks 配置来进行代码分割。下面是一个示例配置：

// www.javascriptcn.com code example
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

在上面的配置中，optimization.splitChunks 配置用于代码分割。chunks: 'all' 表示将所有的模块都分割成多个文件。cacheGroups 配置用于定义分割的规则。在上面的例子中，我们定义了一个名为 vendor 的缓存组，它用于将所有来自 node_modules 目录的模块打包进一个名为 vendors 的文件中。

公共模块提取

在多个页面中，可能会存在一些公共模块，例如 jQuery、React 等。这些公共模块可能会被多次加载，浪费网络资源。为了避免这种情况，我们可以将这些公共模块提取出来，打包成一个单独的文件，供多个页面共享。

Webpack 通过 optimization 配置来进行公共模块提取。下面是一个示例配置：

// www.javascriptcn.com code example
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
    runtimeChunk: {
      name: 'manifest',
    },
  },
};

在上面的配置中，optimization.runtimeChunk 配置用于提取运行时代码。name: 'manifest' 表示将运行时代码打包进一个名为 manifest 的文件中。

在多页面应用中，我们可以使用 HtmlWebpackPlugin 插件来自动注入打包后的文件。下面是一个示例配置：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      chunks: ['main', 'vendors', 'manifest'],
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: 'src/about.html',
      chunks: ['about', 'vendors', 'manifest'],
    }),
  ],
};

在上面的配置中，我们通过 HtmlWebpackPlugin 插件来自动注入打包后的文件。chunks 配置用于指定每个 HTML 页面需要加载的模块。在上面的例子中，index.html 需要加载 main、vendors 和 manifest 三个模块，about.html 需要加载 about、vendors 和 manifest 三个模块。

结语

通过代码分割和公共模块提取，我们可以优化多页面应用的加载速度，提高用户体验。在实际开发中，我们应该根据项目的实际情况来进行优化，避免不必要的性能损失。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3e52aa941bf7134764a8f