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

Question

我的项目中有一个文件，它有几个像这样的 export ASSET_NAME = require('/assets/myAsset.png') 导出，我将它用于一些我想使用的 ui 位url-loader 用于对这些 Assets 图像进行 base64。

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

检查我构建的项目后，我可以看到所有这些 base64 字符串都位于我的 commons.js 文件中。理想情况下，我希望这个文件是它自己的，例如 assets.js，这样它就可以与 commons.js 并行加载。阅读文档后我看到的唯一方法是通过 dynamic imports ，但是我不想等待这个文件，也不想在用户执行某些操作时加载它，我只想将它作为单独的文件并行加载到我的页面/与 commons,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 .