Benennen Sie Webpack / Gatsby-Chunkmapping-Zeichenfolgen um

Beim Erstellen unserer Produktions-App in Gatsby sehe ich ungefähr Folgendes:

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

Ist es möglich, diese Pfade zu hashen, anstatt sie auszudrucken? Wir wollen nicht zu viel von dem aussetzen, was im Hintergrund passiert.

Ich habe versucht, diese Konfigurationen im Webpack festzulegen:

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

Und es hascht erfolgreich .jsDateien, aber nicht die Vorlagenpfade.

— David Hellsing
quelle

Ich habe diese Frage positiv bewertet, als ich sie zum ersten Mal sah. Ich denke, sie sollte definitiv in der Produktion erstellt werden.

Leider wird componentChunkName(der betreffende Vorlagenpfad) von Gatsby in generiert createPageund nicht von Webpack verarbeitet.

Der Code, der generiert componentChunkNamewird , ist hier drüben : github

Ich habe versucht, den Code wie folgt zu ändern:

    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

Dadurch werden alle Komponentennamen im Produktionsbuild erfolgreich ausgeblendet:

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

Keiner der lokalen Komponententests ist fehlgeschlagen. Mein Klick-bis-etwas-bricht-Test hat ebenfalls keine Fehler ergeben. Ich könnte später heute eine PR einreichen, um zu sehen, ob die Betreuer einige Erkenntnisse darüber haben, warum dies keine gute Idee ist.

Bearbeiten : Ich habe stattdessen ein Problem geöffnet: Github , Sie können das Problem abonnieren, um zu sehen, wie es behoben wird.

— Derek Nguyen
quelle