一、核心SplitChunksPlugin 智能切割

Webpack 5+ 默认集成此插件，通过 optimization.splitChunks 配置实现精细化切割。

‌1、基础配置示例 ‌

// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem',       // 启用文件系统级缓存
    buildDependencies: {
      config: [__filename]    // 配置文件变更时自动失效缓存
    }
  },
  output: {
    filename: '[name].[contenthash].js' // 基于内容哈希命名
  }
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,          // 模块体积≥30KB才切割
      maxAsyncRequests: 6,     // 并行加载的Chunk数上限
      cacheGroups: {
        // 第三方库组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 10,        // 优先级最高
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/);
            return `npm.${packageName.replace('@', '')}`; // 按包名独立切割（如 npm.lodash）
          }
        },
        // 公共业务代码组
        commons: {
          minChunks: 3,        // 被3+入口引用的模块
          reuseExistingChunk: true,
          filename: 'commons.[contenthash].js'
        }
      }
    }
  }
};

动态加载的公共组件，指定切割名称

// 通过魔法注释指定切割名称，会体现到output的输出名上
import(/* webpackChunkName: "shared-Modal-components" */ "./components/Modal");

二、具体场景

‌场景 1：第三方库独立打包‌

cacheGroups: {
  react: {
    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
    name: 'react-core',
    chunks: 'all',
    enforce: true // 忽略默认切割阈值
  },
  lodash: {
    test: /[\\/]node_modules[\\/]lodash[\\/]/,
    name: 'lodash-core',
    chunks: 'async' // 仅切割异步加载的代码
  }
}

‌场景 2：业务代码复用‌

cacheGroups: {
  utils: {
    test: /[\\/]src[\\/]utils[\\/]/, // 匹配业务工具类，不配置此项的话，将会默认去其他匹配过滤掉的资源
    name: 'shared-utils',
    minChunks: 3, // 被3+页面引用时切割
    minSize: 50000 // 文件需大于50KB
  }
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24