Đổi tên chuỗi webpack / gatsby chunkmaps

Khi xây dựng ứng dụng sản xuất của chúng tôi trong Gatsby, tôi thấy một cái gì đó như thế này:

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

Có thể băm các đường dẫn này thay vì in chúng ra? Chúng tôi không muốn phơi bày quá nhiều từ những gì đang xảy ra ở phía sau.

Tôi đã thử thiết lập các cấu hình này trong webpack:

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

Và nó băm thành công .jscác tập tin nhưng không phải là các đường dẫn mẫu.

— David Hellsing
nguồn

Tôi đã nêu lên câu hỏi này khi lần đầu tiên nhìn thấy nó, tôi nghĩ rằng nó chắc chắn nên được thực hiện trong quá trình sản xuất.

Thật không may, componentChunkName(đường dẫn mẫu trong câu hỏi) được tạo bởi Gatsby trong createPage& không được xử lý bởi webpack.

Mã tạo ra componentChunkNameở đây: github

Tôi đã cố gắng sửa đổi mã như sau:

    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

Điều này ẩn thành công tất cả các tên thành phần trong sản xuất xây dựng:

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

Không có thử nghiệm đơn vị địa phương nào thất bại, thử nghiệm nhấp chuột của tôi cho đến khi một cái gì đó phá vỡ cũng không mang lại bất kỳ lỗi nào. Tôi có thể gửi một PR sau ngày hôm nay để xem liệu các nhà bảo trì có một số hiểu biết về lý do tại sao điều này không phải là một ý tưởng tốt.

Chỉnh sửa : Tôi đã mở một vấn đề thay thế: github , bạn có thể đăng ký vấn đề để xem cách giải quyết.

— Derek Nguyễn
nguồn