已在Gatsby Webpack配置中关闭splitChunks，为何仍出现代码分片？

DevOps 小满

2026-7-14

解决Gatsby禁用Webpack代码分片不彻底的问题

你的配置只关闭了Webpack的splitChunks分片，但没覆盖Gatsby默认的其他分片逻辑，所以还会有代码块生成，具体原因和修复方案如下：

问题根源

Gatsby的页面entry机制：Gatsby默认会为每个页面创建独立的Webpack entry，这部分不受splitChunks控制，因此每个页面仍会生成单独的代码块。
Runtime chunk：Webpack默认可能生成单独的runtime代码块（用于模块加载逻辑），你的配置没显式关闭这部分。
配置方式问题：使用replaceWebpackConfig完全替换Webpack配置，可能破坏Gatsby的默认必要配置，不如在原有配置上修改更稳妥。

修复方案

第一步：关闭基础分片（runtime + splitChunks）

改用setWebpackConfig在原有配置上修改，同时关闭runtimeChunk：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    devtool: false,
    optimization: {
      splitChunks: false,
      runtimeChunk: false,
    },
  });
};

第二步：合并页面entry（彻底生成单一JS文件）

如果仍存在页面级别的代码块，需要将所有页面的entry合并为一个：

exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const config = getConfig();
  
  // 将所有页面入口合并成一个主入口
  config.entry = {
    main: Object.values(config.entry).flat()
  };

  actions.replaceWebpackConfig({
    ...config,
    devtool: false,
    optimization: {
      splitChunks: false,
      runtimeChunk: false,
    },
  });
};