如何在没有动态导入的情况下拆分 commons js？

Question

我的项目中有一个文件有几个 export ASSET_NAME = require('/assets/myAsset.png') 这样的导出，我将它用于某些 ui 位，我想在这些位上使用 url-loader 以便 base64这些资产图片。

然后我在项目的各个页面中使用这个文件，即 import { ASSET_NAME } from "./assets.js"

检查我的 built 项目后，我可以看到所有这些 base64 字符串都位于我的 commons.js 文件中。理想情况下，我希望此文件是它自己的文件，例如 assets.js，以便它可以与 commons.js 并行加载。在阅读文档的唯一方法后，我看到这样做是通过 dynamic imports，但是我不想等待这个文件，也不想在用户执行某些操作时加载它，我只想将它作为单独的文件加载到我的页面与公共资源并行/分开，js

Answer 1

您需要在 next.config.js 文件中指定一个新的 splitChunk。

// next.config.js

module.exports = {
  webpack(config, options) {
    if (!options.isServer) {
      config.optimization.splitChunks.cacheGroups.assetsChunk = {
        chunks: 'all',
        enforce: true,
        minChunks: 1,
        name: 'assets-chunk',
        priority: 10,
        test: /[\\/]path-to-your-asset[\\/]/,
      };
    }
    return config;
  },
};

只需将 path-to-your-asset 替换为导入路径（或部分正则表达式）。

有关详细信息，请阅读 splitChunks docs。

如何在没有动态导入的情况下拆分 commons js？

How to split commons js in next without dynamic imports?

javascript

webpack

next.js