support comment syntax for dynamic import chunkFileName

[zlv-thisF]

rollup is cool ! what i expected is to support comment syntax for dynamic import chunkFileName.

in webpack, we can write like import (/* myChunkFileName */ () => import('../../index.js'))

Feature Use Case

sometimes in project, need to organize all dynamic import to a configuration as blow

[
  {
     render: () => import("../../aaa/")
  },
  {
     render: () => import("../../bbb/")
  },
  {
     render: () => import("../../ccc/")
  },
]

output.chunkFileNames cannot work as expected cus chunks are all called 'index.js' (aaa/index.js bbb/index.js ...) , so output will something like index0 index1 index2 ...

Feature Proposal

is there any way to support comment syntax dynamic chunkFileNames or any ideas to make it work based on current api ? it seems manualChunks cannot get the path parameter passed to dynamic import function

[lukastaegert]

If you depend on the names of your dynamic entry points, you should also make them regular entry points. Then you can use the object form of input to name your chunks:

// rollup.config.js

export default {
  input: {
    'aaa': 'src/aaa',
    'bbb': 'src/bbb',
    // and your regular entry points
  },
}

The names aaa, bbb will then be used for your dynamic chunks.

I am personally not a big fan of adding a comment syntax as it requires some non-trivial logic for Rollup to scan for and associate comments correctly. One could however consider extending Rollup's automatic naming to use directory names instead of file names if two dynamic chunks are identical.

Still, the assumption is that naming of dynamic chunks should be left to Rollup unless you need specific names, in which case you should probably do what I wrote above.

[eMerzh]

Just wanted to chime in with my 2cents here... not the exact same thing, but i'm trying to track bundle size, and the different chunks while the app evolve... but half my chunks are named "index" although they are from vendor node_modules or stuff like that... if i could comment to change this it would really help.... but there might be other ways as well

[kevinfarrugia]

We have the same issue because all our lazy-loaded entry points are in the format ./myModule/index.js. The resultant chunk name is therefore index.[hash].js. We are extracting the folder name using id.split("/"). The resultant chunk name is myModule.[hash].js. This is our config:

chunkFileNames: _chunk => "[name].[hash].js",
manualChunks(id, {getModuleInfo}) {
    const moduleInfo = getModuleInfo(id);

    const idParts = id.split("/");
    if (moduleInfo?.dynamicImporters.length > 0) {
        return idParts[id.length - 2];
    }

    return null;
}