Renomear seqüências de caracteres de chunkmapping para webpack / gatsby

Ao criar nosso aplicativo de produção em Gatsby, vejo algo assim:

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

É possível fazer o hash desses caminhos em vez de imprimi-los? Não queremos expor muito do que está acontecendo nas costas.

Eu tentei definir essas configurações no webpack:

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

E hashes com êxito .jsarquivos, mas não os caminhos do modelo.

— David Hellsing
fonte

Posicionei esta questão de forma positiva quando a vi pela primeira vez, acho que definitivamente deveria ser feita na construção da produção.

Infelizmente, componentChunkName(o caminho do modelo em questão) é gerado pelo Gatsby no createPage& não tratado pelo webpack.

O código que gera componentChunkNameestá aqui: github

Eu tentei modificar o código da seguinte maneira:

    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

Isso oculta com êxito todos os nomes de componentes na construção de produção:

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" ]
...

Nenhum dos testes de unidade local falhou, meu teste de clicar ao redor até que algo quebre também não produziu erros. Eu poderia enviar um PR ainda hoje para ver se os mantenedores têm algumas idéias sobre por que isso não é uma boa idéia.

Editar : em vez disso, abri um problema: github , você pode se inscrever no problema para ver como ele é resolvido.

— Derek Nguyen
fonte