webpack 优化 - 分离代码之 splitChunks

作为前端开发人员，我们经常使用webpack来打包我们的应用程序。但是，随着应用程序规模的增加，打包后的文件变得越来越大，使得页面加载时间变长且响应时间变慢。因此，我们需要学习一些优化技巧来缩小打包后的文件，并使用webpack的 splitChunks 插件帮助我们优化效果。

splitChunks的作用

splitChunks 插件可以将公共代码从不同的模块（例如库）中提取出来，将公共模块打包成一个单独的文件，避免了代码的重复加载和浪费，提高了应用程序的性能和响应速度。

如何使用 splitChunks

使用 splitChunks 插件，我们需要在 webpack.config.js 文件中进行相关配置。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

splitChunks 配置项

chunks

配置块的范围，有效值包括：

• 'all': 选择所有模块。
• 'async': 只从异步加载的模块中提取公共代码。
• 'initial': 只从入口模块中提取公共代码。

minSize

分离出的代码块的最小体积。

maxSize

分离出的代码块的最大体积，设置为0表示没有限制。

minChunks

公共代码块的最小出现次数。

cacheGroups

缓存组是一种将多个缓存组合并到一起的方法，其配置如下：

cacheGroups: {
  default: false,
  vendors: false,
  vendor: {
    test: /[\\/]node_modules[\\/]/,
    name: 'vendor',
    chunks: 'all'
  },
  common: {
    name: 'common',
    minChunks: 2,
    chunks: 'all',
    priority: -20,
    reuseExistingChunk: true
  }
}

cacheGroups 配置项

test

用于控制哪些模块可以被缓存组抽离为公共代码。

name

缓存组的名称。

chunks

控制哪些代码块应该被包含到公共代码块中。

minSize

同上。

priority

优先级。

reuseExistingChunk

用来复用已经存在的代码块，从而减少冗余代码。

示例代码

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import lodash from 'lodash';
import axios from 'axios';

ReactDOM.render(
  <div>Hello World</div>,
  document.getElementById('root')
);

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

通过以上配置，我们可以将来自 node_modules 中的模块打包到 vendor 文件中，将重复出现两次及以上的代码块打包到 common 文件中。

总结

splitChunks 作为 webpack 中一款优化工具，可以帮助我们最大化地利用模块化的特性，使得应用程序加载时间更快，响应速度更快。学习 splitChunks 配置方法的同时，我们还需要了解哪些代码块可以被分离出来，以及设置 cacheGroups 参数来优化代码分离效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ba16e9add4f0e0ff2a2dda