无需动态导入，在Next.js中拆分commons.js分离资源文件

你遇到的问题其实是webpack默认的chunk合并策略导致的——因为你的assets.js被多个页面引用，webpack会把它打包进公共的commons.js里。要实现让它独立成文件并行加载，不需要用动态导入，只需要自定义webpack的拆分规则就行，具体步骤如下：

1. 自定义Next.js的webpack配置 #

在项目根目录的next.config.js里，添加webpack的优化配置，专门为assets.js创建一个拆分规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 新增一个缓存组，专门拆分assets.js
    config.optimization.splitChunks.cacheGroups.assetsChunk = {
      test: /assets\.js$/, // 匹配你的assets.js文件（如果路径特殊可以调整正则，比如/src/assets\.js$/）
      name: 'assets', // 生成的独立chunk名称
      chunks: 'all', // 匹配所有同步/异步引入的场景
      priority: 10, // 优先级高于默认的commons缓存组（默认是5），确保不会被合并
      enforce: true, // 强制拆分，哪怕文件很小也单独打包
    };

    return config;
  },
};

module.exports = nextConfig;

2. 原理说明 #

• webpack的splitChunks.cacheGroups允许我们针对特定模块设置独立的打包规则，这里的assetsChunk缓存组优先级高于默认的公共chunk规则，所以assets.js会被单独拆分出来，不会进入commons.js。
• 配置chunks: 'all'确保不管是同步还是异步引入的assets.js都会被拆分，而enforce: true强制webpack忽略默认的大小限制（比如默认文件小于30kb会被合并），保证它始终是独立文件。

3. 效果验证 #

修改配置后重新构建项目，你会看到输出目录里多了一个assets.[hash].js文件。当用户访问页面时，浏览器会同时请求commons.js和assets.js，实现并行加载，完全不需要修改原来的import语句——你依然可以用同步导入的方式引用资源，体验和之前完全一致，只是打包后的文件拆分更合理了。

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