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

Question

I have a file in my project that has several export ASSET_NAME = require('/assets/myAsset.png') exports like this, I use it for some ui bits that I want to use url-loader on in order to base64 these asset images.

I then use this file in various pages of my project ie import { ASSET_NAME } from "./assets.js"

After inspecting my built project I can see that all these base64 strings are located in my commons.js file. Ideally I'd want this file to be it's own something like assets.js so it can load in parallel with commons.js . After reading the doc's only method I saw to do this was via dynamic imports , however I don't want to await this file nor load it when user makes certain action, I just want it to be separate file loaded to my page in parallel / separate from commons,js

Answer 1

You need to specify a new splitChunk in your next.config.js file.

// 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;
  },
};

Just replace path-to-your-asset to the import path (or some of it as it is a regex).

For more info read splitChunks docs .