How can I avoid all my builded files to be named index

[nicolas-goudry]

Hi there 👋

I’m using vite with React 17 and use code splitting through the use of import(). I also use React’s lazy function to lazy-load my routes.

I have a file architecture like this:

src/components
├── alert
│   ├── alert.jsx
│   ├── alert.module.css
│   └── index.js
├── card
│   ├── card.jsx
│   ├── card.module.css
│   └── index.js
└── input-button
    ├── index.js
    ├── input-button.jsx
    └── input-button.module.css

Whenever I want to import a component, I do it like this (I use the resolve.alias feature of vite):

import Alert from '@/components/alert'

Everything is working fine but I noticed that when I build my app, I end up with several index-[hash].js files in the dist/assets directory… And I don’t really like that:

dist/assets
├── alert.29eaae95.js
├── alert.9d071fcb.css
├── four-o-four.59d2db8c.js
├── index.0a2941c6.js
├── index.0c141fac.js
├── index.1bf7b1e4.js
├── index.474a5715.css
├── index.52068596.css
├── index.5375aa61.js
├── index.560b62ee.js
├── index.574d7540.css
├── index.75008c1d.js
├── index.757602c4.css
├── index.79d989af.css
├── index.8e37fca8.js
├── index.de2d957e.js
├── index.ef72e18b.css
├── last.eb6ae9c9.js
├── logo.220bf9df.svg
├── notify.0d36b9fb.js
└── uniqBy.024d0774.js

I tried playing with rollupOptions.output.chunkFileNames but that doesn’t feel right…

export default {
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: (chunkInfo) => {
          if (chunkInfo.facadeModuleId) {
            const splitPath = chunkInfo.facadeModuleId.split('/')
            const [fileName] = splitPath.splice(-1, 1)
            const [dirName] = splitPath.splice(-1, 1)

            if (fileName === 'index.js') {
              return `assets/${dirName}-[hash].js`
            }
          } else if (chunkInfo.name === 'index') {
            return `assets/[hash].js`
          }

          return 'assets/[name]-[hash].js'
        },
        assetFileNames: (assetInfo) => {
          const splitPath = assetInfo.name.split('/')
          const [fileName] = splitPath.splice(-1, 1)
          const [dirName] = splitPath.splice(-1, 1)

          if (dirName && /^index\.\S+$/.test(fileName)) {
            return `assets/${dirName}-[hash][extname]`
          }

          return 'assets/[name]-[hash][extname]'
        },
      },
    },
  },
}

Is there a cleaner way to do that?

Thanks! ✌️

EDIT: I also opened up a SO question on this matter.