如何移除Next.js打包产物中的core-js以减小主包体积

你之前配置的自定义Babel规则不生效，核心原因是Next.js默认内置了独立的Polyfill注入逻辑，直接向next/babel预设顶层传入useBuiltIns、corejs参数会被框架默认配置覆盖，不会实际生效。Next.js默认会将core-js相关Polyfill全部注入到客户端主包中，默认配置下不会做单独拆分，因此会出现core-js占用主包50KB体积的情况。

根据你是否需要兼容低版本浏览器，可选择以下两种方案：

方案1：完全移除core-js（仅兼容现代浏览器场景） #

如果你的业务不需要兼容IE、低版本移动端浏览器等老旧环境，仅需支持近两年发布的主流现代浏览器，可以通过以下配置彻底移除core-js：

1. 首先在项目根目录修改package.json，新增browserslist字段明确指定兼容目标为现代浏览器：

{
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "last 2 Edge versions"
  ]
}

2. 修改项目根目录的next.config.js配置，关闭框架内置的Polyfill注入，同时在打包阶段忽略core-js的引入：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    polyfillNode: false
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 客户端打包时直接忽略core-js依赖
      config.resolve.alias['core-js'] = false;
    }
    return config;
  }
}

module.exports = nextConfig;

3. 删除项目根目录下的.next缓存文件夹，重新执行构建命令即可。

注意：使用该方案前请确认你用到的所有ES6+ API在目标浏览器中都有原生支持，否则线上会出现语法报错。

方案2：拆分core-js到独立Chunk（需兼容低版本浏览器场景） #

如果你仍然需要core-js提供Polyfill能力，只是不希望它占用主包体积，可以通过webpack分包规则将core-js拆分为独立的异步加载Chunk，避免打进主包：
修改next.config.js的webpack配置，添加分包规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.optimization.splitChunks.cacheGroups.corejsPolyfill = {
      test: /[\\/]node_modules[\\/]core-js[\\/]/,
      name: 'corejs-polyfills',
      chunks: 'all',
      priority: 20,
      enforce: true
    };
    return config;
  }
}

module.exports = nextConfig;

配置完成后清缓存重新构建，core-js会被打包为独立的corejs-polyfills.js文件，不会再占用主包体积，浏览器加载时会和主包并行请求，不影响主包加载速度。

• 如果你使用Next.js 12及以上版本的默认SWC编译器，项目根目录的Babel配置默认不会生效，不需要额外调整Babel规则，直接使用上述webpack配置即可实现需求。
• 所有配置修改后必须删除.next缓存目录重新构建，否则旧的打包缓存会导致配置不生效。

内容的提问来源于stack exchange，提问作者tcetin