SplitChunksPlugin詳解

一、SplitChunksPlugin簡介

SplitChunksPlugin是webpack4中的一個插件，用於抽離公共代碼，減少打包體積，提高加載速度，讓頁面更快地展現出來。

在基於webpack構建的項目中，通常存在着多個共同依賴的模塊，每次打包時都會將這些共同依賴的模塊進行打包，導致打包體積較大，下載速度慢，用戶體驗不佳。SplitChunksPlugin的作用就是將這些共同依賴的模塊抽離成單獨的chunk文件，避免重複打包，減小打包體積，提高頁面加載速度，從而提升用戶體驗。

二、SplitChunksPlugin配置方式

SplitChunksPlugin的配置有兩種方式：通過optimization屬性配置和通過插件方式配置。我們主要介紹optimization屬性配置方式。

三、optimization屬性中的SplitChunksPlugin配置

optimization屬性是webpack4中新引入的屬性，用於優化webpack打包構建，其中的SplitChunksPlugin是用於分離代碼的插件。

optimization屬性中常見的配置項如下：

module.exports = {
  optimization: {
    // 壓縮JS
    minimize: true,
    // 壓縮CSS
    minimizer: [new CssMinimizerPlugin()],
    // 分離公共代碼
    splitChunks: {
      // 分離代碼的規則
      test: /\.js$/,
      // 分離出來的代碼塊的名稱
      name: 'common',
      // 源代碼塊的最小大小
      minSize: 10000,
      // 共同依賴的模塊的引入次數，大於等於該值才會被分離
      minChunks: 2,
      // 同步代碼塊之間的並行請求次數，0表示關閉
      maxAsyncRequests: 5,
      // 異步代碼塊之間的並行請求次數，0表示關閉
      maxInitialRequests: 3,
      // 模塊路徑抽取，默認採用模塊名或包名
      automaticNameDelimiter: '~',
      // 拆分出來的塊的策略
      chunks: 'all',
      // 只考慮會被切割出去的chunk
      enforceSizeThreshold: 50000,
      // 分離的代碼塊需要滿足的條件
      cacheGroups: {
        // node_modules中的模塊抽離
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        },
        // 把src下的模塊切割到一個單獨的塊中
        util: {
          test: /[\\/]src[\\/]utils[\\/]/,
          name: 'util',
          chunks: 'all'
        }
      }
    }
  }
}

以上代碼中的屬性含義如下：

test：用於選擇出需要分離的模塊。
name：抽離出來的chunk的名稱。
minSize：限制最小大小，如果不滿足，不會抽離。
minChunks：共同依賴的模塊的引入次數，大於等於該值才會被分離。
maxAsyncRequests：同步代碼塊之間的並行請求次數，0表示關閉。
maxInitialRequests：異步代碼塊之間的並行請求次數，0表示關閉。
automaticNameDelimiter：模塊路徑抽取，默認採用模塊名或包名。
chunks：拆分出來的塊的策略，一般設置為’all’
cacheGroups：定義緩存組，用於分組配置。

四、cacheGroups配置項詳解

cacheGroups是具體的分組配置，包含了name, test, priority, reuseExistingChunk的選項，是SplitChunksPlugin中非常重要的配置項。cacheGroups中常用的配置項如下：

name：抽離出來的chunk的名稱。
test：用於選擇出需要分離的模塊。
priority：用於定義組抽取的優先級。
reuseExistingChunk：表示如果一個模塊已經被分離出來了，是否繼續重複分離。

以下是cacheGroups的配置實例。

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // node_modules中的模塊抽離
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 1,
          reuseExistingChunk: true
        },
        // 把src下的模塊切割到一個單獨的塊中
        util: {
          test: /[\\/]src[\\/]utils[\\/]/,
          name: 'util',
          chunks: 'all',
          priority: 2,
          reuseExistingChunk: true
        }
      }
    }
  }
}

以上配置中vendor為node_modules中的模塊抽離，util為把src下的模塊切割到一個單獨的塊中。

五、SplitChunksPlugin使用案例

下面來介紹一個使用SplitChunksPlugin插件的案例。

首先，配置webpack.config.js文件，如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    detail: './src/detail.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      minSize: 20000,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'SplitChunksPlugin Demo',
      template: './src/index.html'
    })
  ]
};

之後，你可以在src/index.js文件中導入react和react-dom模塊，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  Hello, world!,
  document.getElementById('root')
);

如果你在src/detail.js文件中也導入react和react-dom模塊，那麼這兩個模塊將會被重複打包。為了避免重複打包，使用SplitChunksPlugin，把這兩個模塊抽離出公共的chunk中，只需要在webpack.config.js中加入如下代碼塊即可：

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    minSize: 20000,
    maxAsyncRequests: 30,
    maxInitialRequests: 30,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        enforce: true
      }
    }
  }
}

其中，cacheGroups用於指定需要抽離的模塊，這裡的vendor表示需要抽離node_modules目錄下的模塊，因為React和React-DOM都在這個目錄下，所以可以使用下面的代碼引入React和React-DOM。

import React from 'react';
import ReactDOM from 'react-dom';

最後，我們運行webpack，就可以看到在dist目錄下生成如下文件：

dist/
  index.html
  index.js
  vendors.js

index.js和vendors.js文件中分別包含了應用自身的代碼和抽離出來的公共代碼，index.html中引用的是index.js和vendors.js兩個文件。

六、總結

通過使用SplitChunksPlugin插件可以抽離共同依賴的模塊，減小打包體積，提高頁面加載速度，提升用戶體驗。本文通過介紹SplitChunksPlugin的基本用法和案例，希望能夠幫助讀者更加深入地了解這個重要的webpack插件。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/152548.html