Next.js：如何将 source-map-explorer 与 Next.js 一起使用

Question

我想使用source-map-explorer分析我的 Next.js 构建。有人可以帮我编写脚本吗？

\n

对于 React (CRA)，我使用以下脚本：

\n

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

\n

npm run build:analyze\n

\n

是否也有类似的方法来分析内部构建.next？

\n

\n更新

\n.next/文件结构：

\n

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

\n

Answer 1

自Next.js 10.0.4起可用，您可以在文件中为生产构建启用源映射生成，next.config.js因为默认情况下它是禁用的。

// next.config.js

module.exports = {
    productionBrowserSourceMaps: true
}

然后，您可以修改 npm 脚本以定位.next目录中的正确文件夹。

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