webpack / gatsbyチャンクマッピング文字列の名前を変更する

Gatsbyで本番用アプリをビルドすると、次のようになります。

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

これらのパスを印刷する代わりにハッシュ化することは可能ですか？背後で起こっていることからあまり露出したくないのです。

私はこれらの設定をwebpackで設定してみました：

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

また、.jsファイルは正常にハッシュされますが、テンプレートパスはハッシュされません。

— デビッドヘルシング
ソース

この質問を最初に見たとき、私は賛成票を投じました。間違いなく、本番ビルドで行う必要があると思います。

残念ながら、componentChunkName（問題のテンプレートパス）は、Gatsbyによって生成されます。createPage、webpackでは処理されません。

生成されるコードcomponentChunkNameはここにあります：github

私は次のようにコードを変更しようとしました：

    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

これにより、製品ビルドのすべてのコンポーネント名が正常に非表示になります。

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

ローカルユニットテストはどれも失敗しませんでした。何かが壊れるまでクリックするテストでもエラーは発生しませんでした。今日は後でPRを提出して、メンテナがなぜこれが良い考えではないのかについての洞察があるかどうかを確認するかもしれません。

編集：代わりに問題を開いた：github、問題をサブスクライブして、それがどのように解決されるかを確認できます。

— デレク・グエン
ソース