Next.js：如何將 source-map-explorer 與 Next.js 一起使用

Question

我想用source-map-explorer分析我的 Next.js 構建。 有人可以幫我寫劇本嗎？

對於 React (CRA)，我使用以下腳本：

"build:analyze": "npm run build && source-map-explorer 'build/static/js/*.js'",

npm run build:analyze

是否也有類似的方法來分析.next中的構建？

更新

.next/文件結構：

.next
├── BUILD_ID
├── build-manifest.json
├── cache
│   └── webpack
│       ├── client-production
│       │   ├── 0.pack
│       │   └── index.pack
│       └── server-production
│           ├── 0.pack
│           └── index.pack
├── export-marker.json
├── images-manifest.json
├── prerender-manifest.json
├── react-loadable-manifest.json
├── required-server-files.json
├── routes-manifest.json
├── server
│   ├── chunks
│   │   ├── 129.js
│   │   ├── 398.js
│   │   ├── 50.js
│   │   ├── 649.js
│   │   ├── 664.js
│   │   ├── 690.js
│   │   ├── 803.js
│   │   ├── 825.js
│   │   └── 859.js
│   ├── font-manifest.json
│   ├── pages
│   │   ├── 404.js
│   │   ├── 500.html
│   │   ├── _app.js
│   │   ├── _document.js
│   │   ├── _error.js
│   │   ├── api
│   │   │   └── get-config.js
│   │   ├── auth
│   │   │   ├── login-error.js
│   │   │   ├── login-success.js
│   │   │   └── vendor-repair.js
│   │   ├── help.js
│   │   ├── home.js
│   │   ├── index.js
│   │   ├── onboarding.js
│   │   ├── photo-gallery-details.js
│   │   ├── photo-gallery.js
│   │   ├── popup.js
│   │   ├── practise.js
│   │   ├── privacy-policy.js
│   │   ├── profile.js
│   │   ├── reference-documents.js
│   │   ├── repair-details.js
│   │   ├── repair-request.js
│   │   ├── stage-area.js
│   │   ├── store-comments.js
│   │   ├── store-visit-checklist.js
│   │   ├── store-visit-history.js
│   │   ├── visual-merchandise-details.js
│   │   └── visual-merchandise.js
│   ├── pages-manifest.json
│   └── webpack-runtime.js
└── static
    ├── chunks
    │   ├── 29107295-62449f6ab50432c0efef.js
    │   ├── 475-f51e5d80bd683f3b5684.js
    │   ├── 4a3ea9cd-27e375e040b0a04d492d.js
    │   ├── 514-2f11410f8595f17ec257.js
    │   ├── framework-c179ed8d0295df0a6019.js
    │   ├── main-c9abfc3dcd7802a764ed.js
    │   ├── pages
    │   │   ├── 404-8481e9d7d36e8670eb39.js
    │   │   ├── _app-eb5037c043313bbfb3fc.js
    │   │   ├── _error-a33892d286e78bfa334d.js
    │   │   ├── auth
    │   │   │   ├── login-error-8141cf890a77a08b5fd7.js
    │   │   │   ├── login-success-494df6631cb3f5141e9a.js
    │   │   │   └── vendor-repair-bed782e18fed509b3903.js
    │   │   ├── help-e318e021fc815ad4c48a.js
    │   │   ├── home-c6c8b871ab5c5738665e.js
    │   │   ├── index-bd34bcc4cc28f9419b8d.js
    │   │   ├── onboarding-07120812010a84501867.js
    │   │   ├── photo-gallery-details-f515c1b20e11f414190b.js
    │   │   ├── photo-gallery-e3972e175274149dba6b.js
    │   │   ├── popup-81f14fa216f8b1def307.js
    │   │   ├── practise-2b8d378b633a9b426aab.js
    │   │   ├── privacy-policy-5c65687e77deed0661a0.js
    │   │   ├── profile-58058efb871cd14f8a2e.js
    │   │   ├── reference-documents-6507fb50d903d9b6881e.js
    │   │   ├── repair-details-e2e94513e20e98f7e274.js
    │   │   ├── repair-request-26a0d3902ac752eafeab.js
    │   │   ├── stage-area-64d34fda6a621eecdc1c.js
    │   │   ├── store-comments-9dbd60b5353c708b220b.js
    │   │   ├── store-visit-checklist-411682c351d799fe983a.js
    │   │   ├── store-visit-history-224243943fdb8ae73663.js
    │   │   ├── visual-merchandise-88be768dfe1fc5ada55f.js
    │   │   └── visual-merchandise-details-c102d8d548e4757a72e6.js
    │   ├── polyfills-7b08e4c67f4f1b892f4b.js
    │   └── webpack-e5108aeecfc3e7f070df.js
    ├── css
    │   ├── 03632b0eee83f601f359.css
    │   └── f999bd706539c2e100c7.css
    ├── media
    │   ├── Metropolis-Medium.251ab6a3f9cf79779269596ecbe28574.eot
    │   ├── Metropolis-Medium.a8208f13e1711b160eabc04bafbd04d9.ttf
    │   ├── Metropolis-Medium.bff42e1c5682f2689bdc8e47a3753b27.woff2
    │   ├── Metropolis-Medium.f23d75633ae80143c0f4d819d6a0d323.woff
    │   ├── Metropolis-Regular.360d0f5a8067816addd5a4da45aaa660.eot
    │   ├── Metropolis-Regular.b54f45f08c62b81d0078de96bb920cd9.ttf
    │   ├── Metropolis-Regular.cd75f7c84a6375cdee1928c936c13a20.woff
    │   ├── Metropolis-Regular.e90dcb53335abcd72603e0718c6c8cd2.woff2
    │   ├── Metropolis-SemiBold.03a3e314fb58e1b6fe4104e24dee09a7.woff
    │   ├── Metropolis-SemiBold.1c6f27c0abbd4b2a94f84e21efc14265.eot
    │   ├── Metropolis-SemiBold.3af64c0941a01fed6ea3e61028323897.woff2
    │   ├── Metropolis-SemiBold.bdaa1ae71421dd75bb29537a78b2ed08.ttf
    │   ├── ajax-loader.fb6f3c230cb846e25247dfaa1da94d8f.gif
    │   ├── helveticaneue-bold.54da3e9e715c351fef284c8fe3d191d2.eot
    │   ├── helveticaneue-bold.80c2aa2e5c685eae489425fd673346f0.woff
    │   ├── helveticaneue-bold.b17142a9ee042ff5cfecce7bc12f3513.ttf
    │   ├── helveticaneue-bold.b82ee7f1ae8568f0d6bae2b98b4bff46.svg
    │   ├── helveticaneue-bold.f66775fae72ac8325a23028c5accda16.woff2
    │   ├── helveticaneue-light.61226a60a0b5787be0fba7d142ee703d.woff2
    │   ├── helveticaneue-light.6e3ec2feb1535ebf53e9f4d25dcfa94f.woff
    │   ├── helveticaneue-light.d846f89ab1d295bd315d9c71167df502.svg
    │   ├── helveticaneue-light.ddf262cb96782fefcbc8984c8131a471.eot
    │   ├── helveticaneue-light.fb11a81f919945d13c73b549d4e7e1e1.ttf
    │   ├── helveticaneue-medium.29744a2c2edcc640ecb99d2de05f9c2e.woff
    │   ├── helveticaneue-medium.4a368f8dd72410bb7e6ffe37e91100c4.ttf
    │   ├── helveticaneue-medium.54e305719b6cfc7db698fa584ea9e738.woff2
    │   ├── helveticaneue-medium.8aca99ab7abac084902d2fcd8a68625e.svg
    │   ├── helveticaneue-medium.bfaaa603f19e12a88d35305f96b4b25f.eot
    │   ├── slick.2630a3e3eab21c607e21576571b95b9d.svg
    │   ├── slick.295183786cd8a138986521d9f388a286.woff
    │   ├── slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot
    │   └── slick.c94f7671dcc99dce43e22a89f486f7c2.ttf
    └── pNP1560UJNYEPcr4n-2-U
        ├── _buildManifest.js
        └── _ssgManifest.js

Answer 1

我最近用source-map-explorer配置了next.js 。

按着這些次序：

1. 安裝source-map-explorer ：

    npm install -D source-map-explorer

2. 更新next.config.js文件：

    module.exports = { productionBrowserSourceMaps: true //...Other configs if any. }

   • 注意：這會使構建過程變慢。

3. 添加腳本：

    "scripts": { "analyze": "source-map-explorer.next/static/**/*.js", "build": "next build", "build:analyze": "npm run build && npm run analyze" }

PS：如果生成了源映射，您可能需要刪除.next文件夾，然后運行命令。

Answer 2

您需要在next.config.js文件中為生產構建啟用源 map 生成，因為默認情況下它是禁用的。

// next.config.js

module.exports = {
    productionBrowserSourceMaps: true
}

然后，您可以修改 npm 腳本以定位.next目錄中的正確文件夾。

"build:analyze": "npm run build && source-map-explorer .next/static/**/*.js"