Renombrar cadenas de chunkmapping webpack / gatsby

Cuando construyo nuestra aplicación de producción en Gatsby, veo algo como esto:

window.___chunkMapping={
  "app":[],
  "component---src-templates-page-tsx":[],
  "component---src-templates-pages-newsletter-tsx":[]
}

¿Es posible cortar estos caminos en lugar de imprimirlos? No queremos exponer demasiado de lo que está sucediendo en la parte de atrás.

Intenté configurar estas configuraciones en el paquete web:

output: {
  filename: `[chunkhash:2][contenthash:5].js`,
  chunkFilename: `[chunkhash:2][contenthash:5].js`,
},

Y con éxito hash los .jsarchivos pero no las rutas de plantilla.

— David Hellsing
fuente

Voté esta pregunta cuando la vi por primera vez, creo que definitivamente debería hacerse en la producción.

Desafortunadamente, componentChunkName(la ruta de la plantilla en cuestión) es generada por Gatsby en createPagey no es manejada por webpack.

El código que genera componentChunkNameestá aquí: github

Traté de modificar el código de la siguiente manera:

    const { kebabCase } = require(`lodash`)
    const path = require(`path`)
+   const uuidv5 = require(`uuid/v5`)
    const { store } = require(`../redux`)

    const generateComponentChunkName = componentPath => {
      const program = store.getState().program
      let directory = `/`
      if (program && program.directory) {
        directory = program.directory
      }
      const name = path.relative(directory, componentPath)

-     return `component---${kebabCase(name)}`
+     return process.env.NODE_ENV === `production`
+       ? `component---${uuidv5(name, uuidv5.URL)}`
+       : `component---${kebabCase(name)}`
    }

    exports.generateComponentChunkName = generateComponentChunkName

Esto oculta con éxito todos los nombres de componentes en la compilación de producción:

app: Array [ "/app-e593b3d93932ed3a0363.js" ]
"component---11d478fe-6a55-579c-becf-625ab1e57cf4": Array [ "/component---11d478fe-6a55-579c-becf-625ab1e57cf4-76c90ae50035c52657a0.js" ]
"component---15c76861-b723-5e0a-823c-b6832aeeb0a0": Array [ "/component---15c76861-b723-5e0a-823c-b6832aeeb0a0-18eb457ba6c147e1b31b.js" ]
...

Ninguna de las pruebas de unidades locales falló, mi prueba de hacer clic alrededor hasta que algo se rompe tampoco ha arrojado ningún error. Podría presentar un RP más tarde hoy para ver si los mantenedores tienen algunas ideas sobre por qué esto no es una buena idea.

Editar : abrí un problema en su lugar: github , puedes suscribirte al problema para ver cómo se resuelve.

— Derek Nguyen
fuente