webpack 中 chunks配置和使用详解

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 可选值：'all' | 'async' | 'initial'
      minSize: 20000, // 生成块的最小体积（字节）
      maxSize: 0, // 生成块的最大体积（字节），超出会尝试拆分
      minChunks: 1, // 被引用次数达到多少时才提取为单独块
      maxAsyncRequests: 30, // 异步请求的最大并行数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 块名称的分隔符
      cacheGroups: { // 缓存组配置
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配第三方库
          priority: -10, // 优先级
          filename: 'vendors.js', // 自定义输出文件名
        },
        default: {
          minChunks: 2, // 被引用至少2次时提取
          priority: -20,
          reuseExistingChunk: true, // 复用已存在的块
        },
      },
    },
  },
};

cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    name: 'vendors',
    chunks: 'all',
  },
},

// 示例代码
button.addEventListener('click', () => {
  import('./analytics.js').then(({ trackEvent }) => {
    trackEvent('click');
  });
});

// 示例代码
button.addEventListener('click', () => {
  import('./analytics.js').then(({ trackEvent }) => {
    trackEvent('click');
  });
});

module.exports = {
  optimization: {
    runtimeChunk: 'single', // 提取为单个文件 runtime.js
  },
};

const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
        },
        common: {
          name: 'common',
          minChunks: 2,
          priority: -10,
        },
      },
    },
    runtimeChunk: 'single',
  },
  plugins: [
    new BundleAnalyzerPlugin(), // 分析打包结果
  ],
};